:cellClassName实现表单单元格添加 类名.

:cellClassName

• 官方

cell-class-name
单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className。
Function({row, column, rowIndex, columnIndex})/String

• 开发实例

html代码段

在el-table中添加:cell-class-name 创建事件函数名 "expandactive"

 <el-table :cell-class-name="expandactive">
 <el-table>

JavaScript代码段

注意点:

• 参数必须带{row, column, rowIndex, columnIndex} 是elementUi使用的ES解构赋值方式,

[a,b]=[2,3]  
结果是:a=2, b=3
{a,b}={a:10,c:8}
结果就是 {a: 10, c: 8}

• 如果你参数不但{} 虽然可以打印得到数据,但不能引用数据中值

//错误写法
 expandactive ( row, column, rowIndex, columnIndex ) {

    console.log(row)   得到结果:对象row数据  但是下面引用row对象中的值 
     //  row.thisWarehouse   拨错为.thisWarehouse 未定义
     
        if (row.thisWarehouse && columnIndex == 0) {
		     return 'wareactive';
		 }
     }

正确写法 Function({`row, column, rowIndex, columnIndex`})         /`String`


  expandactive ( {row, column, rowIndex, columnIndex} ) {
  
		    if (row.thisWarehouse && columnIndex == 0) {
		    
		       return  'wareactive';  //返回值字符串   /`String`
		    }
    }
  

css代码段

• 注意点: .wareactive 不能写在<style lang="scss" scope>中 要把.wareactive升级为全局才起作用

<style lang="scss">
 .wareactive{
    background:url('./assets/img/fencang.png') no-repeat !important;
  } 
</style>