请问一下elementui使用el-table怎么隐藏列

Question

如图所示，目前的想法是用jq...求各位解答。

---

感谢各位的解答，有点魔怔了。。昨天使用v-if没有效果，今天试一下可以了，但是v-show没有作用，因为我这里是要频繁的控制显示隐藏的，所以想使用v-show，我再琢磨一下了。。。

Answer 1

结一下问题。

其实这个需求是有一个选择框，选择哪几项就显示哪几项，下面arr就是选择框的选择项，checkboxchange()是监听选择框的变化事件，classnone就是display: none;最终还是用jq解决的。。。不用v-if是因为数据量多，用起来卡顿。

    checkboxChange () {
      let arr = [] // 这里找到的一个对应关系，实际有数据不方便展示
      arr.forEach((item, index) => {
        let className = global.$(`thead > tr > th:nth-child(${index + 3})`).attr('class').toString()
        className = '.' + className.replace('is-leaf', '').replace(' ', '').replace('mua-none', '')
        if (this.chooseList.indexOf(item) === -1) {
          global.$(className).addClass('none')
        } else {
          global.$(className).removeClass('none')
        }
      })
    }

Answer 2

<el-table-column v-if=""></el-table-column>不就行了吗...

Answer 3

v-show v-if不就可以么

我一般vue项目不会用jq

Answer 4

暂时隐藏吗?

<el-table
  :data="tableData"
  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="address"
    label="地址" v-if="show">
  </el-table-column>
</el-table>

v-if或者v-show就好了呀

Answer 5

用v-if,用jq确实不太方便dom操作思路,用vue数据操作思路

Answer 6

虽然提问很久了，还是强答一下。。。
通过事件，动态切换列类名就可以了。@header-click="handleHeaderClick" 回调函数中关于列的信息，有一个className,直接修改可以影响到当前列所有td元素。

handleHeaderClick(column, event){
    if (event.target.className.includes('el-icon-close')){
        column.className = 'none'
    }
}
// .... 另外需设置表格属性 table-layout: auto;不过这样初始列宽由浏览器根据内容自动渲染
.none {
  display: none!important;
}

Answer 7

我也是同问 为什么v-show不行 v-if数据少一点还好，数据多的时候卡的不要不要的重新创造节点