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

Ronin_zhou2023-11-21 9:53

javascript 复制代码

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)
})

用法

javascript 复制代码

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

效果