更改input标签样式 from表单下的input 使用/deep/
.el-form /deep/ .el-input__inner {
width: 149px;
height: 32px;
}
下载element-ui
运用vue ui
插件 添加插件
vue-cli-plugin-element
/deep/ .el-date-editor {
width: 149px;
height: 32px;
}
stripe隔行深色
:header-cell-style="getRowClass" 奇数行深色
getRowClass({ row, column, rowIndex, columnIndex }) {
if (rowIndex % 3 == 0) {
return 'background:rgb(250,250,250)'
} else {
return ''
}
},
align:center
/deep/ .el-table__header-wrapper {
width: 600px !important;
overflow: hidden;
}
-
/deep/ .cell {
&:nth-of-type(1) {
display: flex;
align-items: center;
}
display: flex;
align-items: center;
justify-content: center;
}
商品总计
¥852
邮费
¥0
实际支付
¥862
支付方式
微信
.table {
width: 100%;
outline: none;
border-collapse: collapse;
// border: 0;
border: 0.5px solid #e9e9e9 !important;
tr {
height: 37px;
td {
&:nth-of-type(1) {
width: 190px;
// height: 36px;
padding: 0;
border-left: 0;
font-size: 14px;
font-family: PingFang SC;
font-weight: 400;
padding-left: 23px;
color: rgba(102, 102, 102, 1);
}
const routerPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
return routerPush.call(this, location).catch(error=> error)
}
Vue.use(VueRouter)
主页面 router-view 绑定一个key
key的值
computed: {
key() {
// 只要保证 key 唯一性就可以了,保证不同页面的 key 不相同
return this.$route.fullPath
}
},
必须在每个form-item上添加当前数据属性,才能生效
empty(formName){
// console.log(formName);
// console.log(this.$refs[formName])
this.$refs[formName].resetFields();
},
在vue中千万别浅拷贝赋值对象
https://blog.csdn.net/Hedy17/article/details/79378774?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase
var arr = ['a','b','c','d'];
arr = ['a','b','c','d'];
arr.splice(1,1,'ttt');
替换
main.js 页面
axios.defaults.baseURL = '/'
axios.interceptors.request.use(config => {
config.headers.Authorization = Cookies.get('token')
return config
})
vue.config.js 页面
module.exports = {
// // cli3 代理是从指定的target后面开始匹配的,不是任意位置;配置pathRewrite可以做替换
// devServer: {
// port: '8080',
// open: true,
// proxy: {
// '/api': {
// // /api 的意义在于,声明axios中url已/api开头的请求都适用于该规则,
// // 注意是以/api开头,即:axios.post({url: '/api/xxx/xxx'})
// target: 'demo.saas.com',
// // 此处target的意义在于:造成跨域是因为访
// // 问的host与我们的请求头里的origin不一致,所以我们要设置成一致,这个具体请看下文
// changeOrigin: true,
// pathRewrite: {'^/api': 'http://localhost:8080/api'}
// // 此处是大部分文章都不会明说的的地方,
// // 既然我们设置了代理,则所有请求url都已写成/api/xxx/xxx,那请求如何知道我们到底请求的是哪个服务器的数据呢
// // 因此这里的意义在于, 以 /api开头的url请求,代理都会知道实际上应该请求那里,
// // ‘我是服务器/api’,后面的/api根据实际请求地址决定,即我的请求url:/api/test/test,被代理后请求的则是
// // https://我是服务器/api/test/test
// }
// }
// }
devServer: {
open: true, //是否自动弹出浏览器页面
host: "localhost",
port: '8080',
proxy: {
'/api': {
target: 'http://demo.saas.com/', // 请求服务器根路径
changeOrigin: true, // 是否跨域
ws: true, // websocket
pathRewrite: { // 重写路径: 当检测到请求地址里包含 /v1 时,将此路径进行跨域代理操作
'^/api': ''
}
}
}
}
}
登录事件
login() {
// 登录之后设置token
this.$axios.post('/api/admin/login/login', this.form).then(res => {
console.log(res)
if (res.data.code) {
this.$cookies.set('token', res.data.data.token)
this.$message.success('登录成功')
this.$router.push('/index')
} else {
this.$message.error('登录失败!')
}
})
}
C:\Windows\System32\drivers\etc\hosts
import * as qiniu from 'qiniu-js'
const file = e.target.files[0]
const key = undefined
const token = this.qiniuToken.token //从服务器拿的并存在本地data里
const putExtra = {
fname: '',
params: {},
mimeType: ['image/png', 'image/jpeg', 'image/gif']
}
const config = {
useCdnDomain: true //使用cdn加速
}
const observable = qiniu.upload(file, key, token, putExtra, config)
observable.subscribe({
next: result => {
// 主要用来展示进度
},
error: () => {
console.log('上传图片失败')
// this.$notify('上传图片失败')
},
complete: res => {
console.log(res)
this.school_banner_arr[index].banner = this.uploadURL + res.key
}
})
handleCurrentChange(e) {
console.log(e)
this.page = e
this.getState()
},
changePagestate(e) {
console.log(e)
this.pageSize = e
this.getState()
},
async deletename(id) {
console.log('删除操作', id)
await this.$confirm('此操作将永久删除该厂家信息, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
console.log(id)
let obj = {
factory_id: id,
token: this.token
}
this.$axios
.post('/api/admin/factory/factory_del', obj)
.then(res => {
this.$message({
type: 'success',
message: '删除成功!'
})
this.getState()
})
.catch(err => {
this.$message({
type: 'error',
message: '删除失败!'
})
})
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
})
},
{
{scope.$index + (page - 1) * pageSize +1 }}
console.log('提交form表单')
let obj = {
token:this.token,
password:this.this.form.password
}
const res = await this.$axios.post('/api',obj)
if(res.data.code == 1){
this.$message.error('修改成功');
}else{
this.$message.error('修改成功');
}
.card {
width: 100%;
overflow: scroll;
// height: 3000px !important;
}
if (!/image\/\w+/.test(file.type)) {
this.$message.error('上传类型必须是图片')
return false
}
https://www.cnblogs.com/zhujiqian/p/11475467.html
downQrcode(row) {
let hreLocal = ''
hreLocal = this.qiNiuUrl + row.qrcode
let name = row.school_name
this.downloadByBlob(hreLocal, name)
},
downloadByBlob(url, name) {
let that = this;
let image = new Image()
image.setAttribute('crossOrigin', 'anonymous')
image.src = url
image.onload = () => {
let canvas = document.createElement('canvas')
canvas.width = image.width
canvas.height = image.height
let ctx = canvas.getContext('2d')
ctx.drawImage(image, 0, 0, image.width, image.height)
canvas.toBlob(blob => {
let url = URL.createObjectURL(blob)
that.download(url, name)
// 用完释放URL对象
URL.revokeObjectURL(url)
})
}
},
download(href, name) {
let eleLink = document.createElement('a')
eleLink.download = name
eleLink.href = href
eleLink.click()
eleLink.remove()
},
let alink = document.createElement('a')
alink.href = this.baseUrl+'api/admin/school/collection_excel?qrcode_id='+id+'&type=2&token='+this.token
alink.target = '_blank'
alink.click();
let fileObj = e.target.files[0],
fileName = fileObj.name,
fileType = fileName.substring(fileName.indexOf('.'))
if (fileType != '.xls' && fileType != '.xlsx') {
this.$message.error('上传文件只能是xls,xlsx格式!')
return false
}
https://www.cnblogs.com/chase-star/p/9990124.html
cursor:pointer;
let alink = document.createElement('a')
alink.href = this.qiNiuUrl + imgurl;
alink.target = '_blank';
alink.click();
:row-class-name="getRowClassName"
:default-expand-all="true"
type="expand"
getRowClassName({ row, rowIndex }) {
if (row) {
return 'row-expand-cover'
}
}
更改select框下的input的样式
css
.select-option /deep/ .el-input__inner{
width: 165px;
}
已启用
未启用
https://juejin.im/post/5bd02f98e51d457a944b634f
lintOnSave: false,
:close-on-click-modal="false"
.input-class{
/deep/ .el-input__inner{
width: 160px;
}
}
import paging from '../common/paging.vue'
components: {
paging
},
{
{
scope.$index + (page - 1) * pageSize + 1
}}
import CardTop from '../common/Cards.vue'
CardTop
{
{
contenet
}}
{
{ List[0].name }}
{
{ List[1].name }}
data:{
testData:{
dataInfo:{
a: '我是a',
b: '我是b'
}
}
},
watch: {
testDataNew: {
handler: (val, olVal) => {
console.log('我变化了', val, olVal)
},
deep: true
}
},
computed: {
testDataNew() {
return JSON.parse(JSON.stringify(this.testData))
}
}
pitchSchoolSchoolName(ne, old) {
console.log(ne)
console.log(old)
console.log(1092)
let show = false
setTimeout(() => {
if (Array.isArray(ne[0])) {
console.log(ne[0])
console.log(old[0])
console.log('传过来的是一个数组')
console.log(ne)
ne[0].forEach((item, index) => {
console.log(ne[0][index])
console.log('item')
console.log(item)
ne.push(item)
// this.tableDataList.forEach((iii, iad) => {
// // iii.school_id = ne[0][index]
// // iii.school_id = ne[0][index]
// })
})
console.log(ne[0])
// ne.push = ne[0]
ne.splice(0, 1)
console.log(old)
console.log(this.$data.tableDataList)
console.log(ne)
} else {
console.log('consoe.feafwa')
console.log(ne)
console.log(old)
if (Array.isArray(old) && Array.isArray(ne)) {
console.log('长度相同进来了吗')
// 删除学校
console.log(ne.length)
if (ne.length > 0) {
if (ne.length == old.length) {
console.log('长度相同进了几次')
console.log(old)
console.log(ne)
console.log(this.pitchSchoolSchoolName)
this.tableDataList.forEach((item, index) => {
console.log(index)
console.log(ne[index])
console.log(item)
item.school_id = ne[index]
console.log(item)
})
console.log(this.tableDataList)
return false
}
}
let end = 0
if (ne.length < old.length) {
console.log('删除学校的的吗')
end = 1
// 现在是添加,新值比旧值少。
old.forEach((item, index) => {
// 遍历旧值。遍历新值的内容看旧值是否在新值中
if (ne.indexOf(item) == -1) {
console.log(item)
this.tableDataList.forEach((its, iue) => {
if (its.school_id == item) {
this.tableDataList.splice(iue, 1)
}
})
console.log(this.tableDataList)
// this.tableDataList.forEach((it, is) => {
// if (it.school_id == old[index]) {
// // console.log(index);
// this.tableDataList.splice(index, 1)
// }
// })
}
})
}
if (end) {
return false
}
console.log('zoulema')
// 添加学校
if (ne.length > old.length) {
console.log('添加学校吗')
console.log(ne)
console.log(old)
console.log('增加学学的的饿吗')
this.tableDataList.unshift({
standard: [],
listenList: [
{ listenNum: '' },
{ listenSales: '' },
{ listPartne: '' },
{ listenBase: '' }
],
school_id: ne[ne.length - 1],
school_badge: '',
goods_stock_arr: [
// {
// size: '',
// state: [
// {
// school_badge: '',
// num: '',
// add_num: '',
// price: '',
// parter_price: '',
// base_price: '',
// sales: 0
// }
// ]
// }
]
})
console.log(this.tableDataList)
}
// 第一次添加的尺码规格的个数 现在7个
// 现在要循环添加的每个学校的尺码规格 goods_stock_arr
// 先循环学校的个数然后在循环arr的个数
console.log(this.tableData)
console.log(this.tableDataList)
if (ne.length > old.length) {
console.log('添加尺寸了吗')
if (ne.length) {
this.tableData.forEach(item => {
this.tableDataList[0].goods_stock_arr.push({
size: item.size,
state: [
{
school_badge: '',
num: item.num,
add_num: '',
price: item.price,
parter_price: item.parter_price,
base_price: item.base_price,
sales: item.sales
}
]
})
})
}
}
console.log(this.tableDataList)
}
}
}, 0.1)
}
https://www.jianshu.com/p/59dd28f0b9c9
:show-overflow-tooltip="true"
scrollbar-width: none;
::-webkit-scrollbar {
display: none;
}
:span-method="arraySpanMethod"
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
console.log(rowIndex)
if (rowIndex >= 0) {
if (columnIndex == 2) {
return [1, 2]
} else if (columnIndex == 3) {
return [0, 0]
}
}
if (rowIndex >= 0) {
if (columnIndex == 5) {
return [1, 2]
} else if (columnIndex == 6) {
return [0, 0]
}
}
if (rowIndex >= 0) {
if (columnIndex == 12) {
return [1, 2]
} else if (columnIndex == 10) {
return [0, 0]
}
}
},
arr_arr[0] = parseInt(res.data.data.province)
arr_arr[1] = parseInt(res.data.data.city)
arr_arr[2] = parseInt(res.data.data.district)
this.$nextTick(() => {
this.addr_arr = arr_arr
})
// 等到dom加载完成后把数据赋值
// 在页面刷新时将store保存到sessionStorage里
window.addEventListener('beforeunload', () => {
sessionStorage.setItem('store', JSON.stringify(this.$store.state))
})