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

最新推荐文章于 2024-07-26 08:15:00 发布

small面包

最新推荐文章于 2024-07-26 08:15:00 发布

阅读量939

点赞数 1

分类专栏： ElementUI el-table Vue 文章标签： el-table隐藏列 v-if 监听

本文链接：https://blog.csdn.net/weixin_44986077/article/details/113568149

版权

本文介绍如何通过Vue的watch监听和v-if指令来实现在弹框多选状态下的el-table列动态显示和隐藏。当全部选中时，所有列显示；取消选择时，对应列将被隐藏。

摘要由CSDN通过智能技术生成

实现效果是根据弹框的多选控制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