1. ElementUI中的el-select中multiple多选回显数据后没法编辑

• 场景：使用v-model绑定 el-select多选，回显数据时无法进行编辑、删除。
• 原因：由于一些嵌套特别深的数据，导致数据更新了，页面却没有重新渲染。
• 解决方法：在el-select中使用@change=“$forceUpdate()” ，迫使 Vue 实例重新渲染

<el-form-item label="选项" prop="value1">
       <el-select 
           v-model="value1" 
           clearable  
           placeholder="请选择"
           multiple
           collapse-tags
           @change="$forceUpdate()">
           <el-option
               v-for="item in options"
               :key="item.value"
               :label="item.label"
               :value="item.value">
           </el-option>
       </el-select>
   </el-form-item>
 
 data() {
 	return {
 		options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value1: [],
 	}
 }

2. el-table 表头单元格样式

export function headerStyleEvent({row, column, rowIndex, columnIndex}){
    if (rowIndex === 0) {
        return `
        height: 54px;
        background: #F8F8F8;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        text-align:center;
        color: #fff;
        font-size: 14px;
        font-weight: bold;
        color: #333333;
        `;
    }
}

静态页面使用

 <el-table 
    :data="tasksData" 
    style="width: 100%" 
    :header-cell-style="headerStyleEvent">
</el-table>

3. el-upload 组件本地、线上控制台报错404、405问题

场景：使用el-upload上传文件时，本地会报错404，部署到线上，上传文件时，报错405
原因：el-upload有默认的上传事件
解决方案：通过 return false 阻止即可

uploadFileFun(file){
	let formData = new window.FormData();
	 //将获取的文件通过append方法加入实例中
	  formData.append("file", file);
	  formData.append("checkType", 7);
	  this.$api
	      .uploadFile(formData)
	      .then(res => {})
	      .catch(err => {})
	      
	      return false
}

4. el-select校验失效问题

场景：el-select 设置 支持多选multiple，并且对表单该字段进行校验，创建时校验正常，修改时，该字段变为空数组校验失效。如下图所示：

原因：form表单里面，el-select会出现失效的情况，尤其是当el-foem-item 里面又嵌套了el-row，层级太深，导致form检测不到addform的变化。
解决方案：
（1）这个时候要么change事件里面强制更新dom触发（视图更新）
（2）要么再change事件里面对form表单绑定的数据进行拷贝 this.info = JSON.parse(JSON.stringify(this.info));

// 方法一： @change="$forceUpdate()"
<el-select 
    v-model="info.majorsArr" 
     clearable  
     placeholder="请选择"
     multiple
     @change="$forceUpdate()">
     <el-option
         v-for="item in dictData"
         :key="item.value"
         :label="item.label"
         :value="item.value">
     </el-option>
 </el-select>

// 方法二：this.info= JSON.parse(JSON.stringify(this.info))
<el-select 
    v-model="info.majorsArr" 
     clearable  
     placeholder="请选择"
     multiple
     @change="majorsChange">
     <el-option
         v-for="item in dictData"
         :key="item.value"
         :label="item.label"
         :value="item.value">
     </el-option>
 </el-select>

method:{
majorsChange(){
   this.info= JSON.parse(JSON.stringify(this.info))
}
}

5. el-table中鼠标悬浮数据列展示所有。

el-table中设置tooltip-effect=“dark”，同时需要鼠标悬浮展示所有的列设置:show-overflow-tooltip=“true”

 <el-table 
    :data="data" 
     tooltip-effect="dark">
     <el-table-column 
       type="index" 
       label="序号" 
       width="100">
     </el-table-column>
     <el-table-column 
       prop="name" 
       label="名称"
       :show-overflow-tooltip="true">
 </el-table-column>


data() {
 return {
    data: [
	      {
	        name: '名称名称名称名称名称名称名称名称名称名称名称名称1',
	      },
	      {
	          name: '名称名称名称名称名称名称名称名称名称名称名称名称2',
	      }
    ],
  }
},

6. el-table禁选指定行，更新数据后清空table选择项

1. table复选框禁用
   方法： 在type="selection"的el-table-column中添加:selectable=“checkSelect”，并在checkSelect方法中书写禁用条件；
2. 更新数据后清空table选择项
   方法： 采用this.$refs.dataTable.clearSelection();，clearSelection方法是element组件中已经封装好的，可直接使用。
3. 注意： 启用复选框的table，最后添加 :row-key=“getRowKeys”，防止报错。

    <el-table
      :data="resultData"
      ref="dataTable"
      :row-key="getRowKeys"
      @selection-change="handleSelectionChange"
    >
    <el-table-column
        type="selection"
        width="55"
        :reserve-selection="true"
        :selectable="checkSelect">
      </el-table-column>
      <el-table-column 
      	type="index" 
      	label="序号" 
      	width="100">
      </el-table-column>
      <el-table-column
        prop="name"
        label="名称"
      >
    </el-table>
data(){
	return {
		resultData:[
			{
				id: 1,
				name: '名称1',
				isAvoid: true,
			},
			{
				id: 2,
				name: '名称2',
				isAvoid: false,
			},
		],
		selectedReviewData: [],
		
	}
},

method: {
	// 选择的数据
	 handleSelectionChange(val) {
      this.selectedReviewData = val;
    },
	// table复选框禁用
	checkSelect(row,rowIndex){
      if(row.isAvoid){
      	// 该行数据不可选 
        return false
      }else {
      	// 该行数据可选 
        return true
      }
    },
    getRowKeys(row) {
      return row.id;
    },
}