踩坑记录（21--更新中）

21. vue表单嵌套修改的数据无法及时更新

网上查了forceUpdate在本地挺好使的，但是上了测试环境又不好使。
用了$set，页不好使：
给对象赋值的方法
this.$set(Object,key,value)
//Object:目标对象，key:属性名称，value：属性值
给数组赋值的方法：
this.$set(Array,index,value)
//Array:目标数组，index:元素的索引，value：值
后来把新增和修改两个页面拆开了，数据源分成了两个字段名，可能是相互污染的问题？拆开之后，命名不同，就解决了。

22. οnbefοreunlοad=“location=location” 什么意思?

οnbefοreunlοad=“location=location”
onbeforeunload 能引起当前页面发生跳转的任何动作，都会触发这个事件,并且它先于unload事件被触发.
第一个location 就是跳转的意思 =后面加路径
第二个location 应该是传递的参数

23. expires=Thu, 01 Jan 1970

删除 cookie 。设置 expires 参数为以前的时间即可，如下所示，设置为 Thu, 01 Jan 1970 00:00:00 GMT:
document.cookie = “username=; expires=Thu, 01 Jan 1970 00:00:00 GMT”;
注意，当您删除时不必指定 cookie 的值。

24. js去重并且去掉null

const all = [
  {name: 'amy', age: 13},
  {name: 'bill', age: 19},
  {name: 'bill', age: 14},
  {name: null, age: null},
  {name: null, age: null},
  {name: 'cindy', age: 17},
  {name: 'cindy', age: 12},
  {name: null, age: null},
  {name: 'dave', age: 19},
  {name: 'elena', age: 20},
  {name: 'fiona', age: 23},
]
const nameList = all.map(item => {
  return item.name
}).filter(item => item !== null) // 去掉null
const uniqueName = Array.from(new Set(nameList)) // 去重
// Array.from 可以将一个set对象转为数组
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

25. el-table的合计行怎么添加

第一步show-summary 属性和summary-method方法的添加

<el-table ref="elTable"
  :data="tableData"
  :width="width"
  :height="height"              
  show-summary
  :summary-method="getSummary">
1
2
3
4
5
6

第二步分为两种情况：

1. 合计需要自己计算：

//表格合计计算
getSummary(param) {
     const { columns, data } = param;
     const sums = [];
     //要求和的列
     const sumColumns=['数量','总金额（进价）','总金额（零售价）'];
     columns.forEach((column, index) => {
         if (index === 0) {
             sums[index] = '合计';
             return;
         }
         if (sumColumns.indexOf(column.label)<0) {
             sums[index] = '';
             return;
         }
         const values = data.map(item => item[column.property]);
         sums[index] = values.reduce((total, curr) => {
             const value = Number(curr);
             if (!isNaN(value)) {
                 return Number(total) + Number(curr);
             } else {
                 return Number(total);
             }
         }, 0);
         sums[index]=sums[index].toFixed(2);
     })
     return sums;
 },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

2. 合计值为后端直接返回，不需要自己算
   方法一：

getSummary(param) {
    const { columns } = param;
    const sums = [];
    //要求和的列
    columns.forEach((column, index) => {
        if (index === 0) {
            sums[index] = '合计';
            return;
        }
        if (index === 1) {
            sums[index] = '--';
            return;
        }
        if (index === 8) {
            sums[index] = this.moneySum;
            return;
        }        
    })
    return sums;
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

方法二：

// 接口返回的数据结构为：
{
  code: 200,
  message: '操作成功'
  result: {
    list: [...],
    moneySum: 123,
    daySum: 25,
    percentSum: '29%'
  }
}
// 获取数据时：
getData() {
  const param = {
    id: this.id,
    name: 'amy'
  }
  queryData(param).then(res => {
    if (res.code === 200) {
      this.myData = res.result.list
      const sumObj = {
        id: '', //第一列空着
        name: '合计', //第二列显示合计两个字
        money: res.result.moneySum, // 第三列显示金额合计值
        day: res.result.daySum, // 第四列显示天数合计值
        percent: res.result.percentSum, // 第五列显示百分比合计值
        age: '' // 第六列空着
      }
      this.myData.push(sumObj)
    }
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

26. el-table-column表头label自定义

方法一：

<el-table-column width="180">
    <template slot="header">
      {{ columnHeader }}  
    template>
el-table-column>
1
2
3
4
5

方法二：

<el-table-column 
	align="center"
	show-overflow-tooltip
	prop="pboneName"
	width="180"
	:lable="columnHeader"
/>

1
2
3
4
5
6
7
8

27. el-dialog设置margin-top值

<el-dialog
  width="80%"
  top="2vh"
  class="add-dialog"
  title="新增页面"
  :close-on-click-modal="false"
  :append-to-body="true"
  :before-close="handleClose"
  @open="handleOpen"
>
1
2
3
4
5
6
7
8
9
10

直接设置top即可

28. overflow的几个属性介绍

overflow 一共有5个属性：
1、overflow:auto ；内容会被修剪，超出设置的宽高后会出现滚动条
2、overflow:scroll;内容会被修剪，不管内容是否超出，都会出现滚动条的位置
3、overflow:visible;这个是默认值，内容不会被修剪，会出现在元素框外面。
4、overflow:hidden;内容被修剪，多余的内容被隐藏
5、overflow:inherit;从父元素那里继承overflow的值。

29. element横向滚动条的合计行在表格外–解决办法

添加如下样式即可：

.el-table {
   overflow: auto;
}
 .el-table--scrollable-x .el-table__body-wrapper {
   overflow-x: visible;
 }
 .el-table__body-wrapper,
 .el-table__header-wrapper,
 .el-table__footer-wrapper {
   overflow: visible;
 }
 .el-table::after {
   position: relative !important;
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

若仍然不起作用，每个样式的前面加上：::v-deep

参考：手写合计行代替elementui自带的合计功能解决合计行在横向滚动条下方的问题

30. element-ui级联框回显不出来

问题描述：
项目中添加编辑功能遇见三级联动的时候，三级联动数据回显不显示

<el-form-item label="所选服务：" prop="nvcBigName">
    <el-cascader v-model="serverDefaultValue" :options="options" @change="serverChange" class="u-width-300">el-cascader>
el-form-item>
1
2
3

data(){
	return{
		serverDefaultValue: [],
		// 所选服务
			options: [
				{
					value: '数据服务',
					label: '数据服务',
					children: [
						{
							value: '会员服务',
							label: '会员服务',
							children: [
								{
									value: '白银会员',
									label: '白银会员'
								},
								{
									value: '黄金会员',
									label: '黄金会员'
								},
								{
									value: 'VIP会员',
									label: 'VIP会员'
								},
								{
									value: '试用会员',
									label: '试用会员'
								}
							]
						}
					]
				}
			],
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

// 所选服务
serverChange(val) {
	console.log(val)
	this.ruleForm.nvcBigName = val[0]
	this.ruleForm.nvcMiddleName = val[1]
	this.ruleForm.nvcServiceName = val[2]
},
//数据回显
this.serverDefaultValue.push(res.data.nvcBigName)
this.serverDefaultValue.push(res.data.nvcMiddleName)
this.serverDefaultValue.push(res.data.nvcServiceName)

//看着没问题，但是不会回显
1
2
3
4
5
6
7
8
9
10
11
12
13

解决方案：
添加key值,回显的时候改变key值就可以了

<el-form-item label="所选服务：" prop="nvcBigName">
    <el-cascader v-model="serverDefaultValue" :key="serverKey" :options="options" @change="serverChange" class="u-width-300"></el-cascader>
</el-form-item>

data(){
	return{
		serverKey:0
	}
}

//数据回显
this.serverDefaultValue.push(res.data.nvcBigName)
this.serverDefaultValue.push(res.data.nvcMiddleName)
this.serverDefaultValue.push(res.data.nvcServiceName)
this.serverKey++
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

参考：elementui级联选择器数据回显问题