elementui表格自定义指令控制显示哪些列可以拖动

Vue.directive('tableBorder', function (el, {value}) {// value允许传字符串数字和数组el.classList.add('z_table_hasBorder')let hasStyle = el.querySelector('style')if(hasStyle){hasStyle.remove()}let style = document.createElement('style')let str = `.z_table_hasBorder  .el-table__cell{border-width: 0px;}`let reg = /^[0-9]*$/if(typeof value === 'string' || typeof value === 'number'){let test = reg.test(value)value  = test ? [Number(value)] : []}else if(!Array.isArray(value)){value = []}let html =value.reduce((prev,item)=>{let test = reg.test(item)return prev += test ? `.z_table_hasBorder tr .el-table__cell:nth-of-type(${item}){border-width: 1px;}` : ''},str)style.innerText = htmlel.appendChild(style)
})

用法

<el-table:data="tableData"borderv-tableBorder="[2,4]"style="width: 100%"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column>

效果