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 = html

  el.appendChild(style)
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

用法

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

效果