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;
    },
}
Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐