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 = html
el.appendChild(style)
})
用法
<el-table
:data="tableData"
border
v-tableBorder="[2,4]"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
效果