watch监听动态隐藏显示el-table列

实现效果是根据弹框的多选控制table列的显示隐藏
在这里插入图片描述
默认全部选中,就是table全部显示,取消选择table列进行隐藏
下面是详细代码
el-table

 <el-table
      :data="tableData"
      border
      stripe
      :header-cell-style="tableHeaderColor"
      style="width: 100%; margin-top:2%;margin-left:0%"
      ref="tableDataRef"
    >
      <!-- :cell-style="getCellStyle" -->
      <el-table-column
        prop="handle"
        label="操作"
        width="300"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="putinorder(scope.row)"
          >加入采购申请</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="outinorder(scope.row)"
          >出入库清单</el-button>
          <el-button
            size="mini"
            type="danger"
            style="margin-top:1%"
            @click="kplace(scope.row)"
          >库位</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="cgcl(scope.row)"
            style="margin-top:1%"
          >采购策略</el-button>
        </template>
      </el-table-column>
      <!-- <el-table-column
        v-for="(item,index) in formThead"
        :key="index"
        :label="item.name"
        width="120px"
        :show-overflow-tooltip='true'
      >
        <template slot-scope="scope">
          {
   {
    scope.row[item.name] }}
        </template>
      </el-table-column> -->
      <el-table-column
        prop="num"
        label="产品编号"
        width="80"
        v-if="colData[0].istrue"
      >
      </el-table-column>
      <el-table-column
        prop="oe"
        label="产品OE号"
        v-if="colData[1].istrue"
        width="110"
      >
      </el-table-column>
      <el-table-column
        prop="name"
        :show-overflow-tooltip='true'
        label="产品名称"
        v-if="colData[2].istrue"
        width="160"
      >
      </el-table-column>
      <el-table-column
        prop="brand"
        label="产品品牌"
        width="80"
        v-if="colData[3].istrue"
      >
      </el-table-column>
      <el-table-column
        prop
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值