Advertisement

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="storeName"
        label="仓库名称"
        width="100"
        v-if="colData[4].istrue"
      >
      </el-table-column>
      <el-table-column
        prop="car"
        label="车系"
        width="140"
        v-if="colData[5].istrue"
      >
      </el-table-column>
      <el-table-column
        prop="carCode"
        label="车型代码"
        :show-overflow-tooltip='true'
        width="120"
        v-if="colData[6].istrue"
      >
      </el-table-column>
      <el-table-column
        prop="count"
        label="库存"
        width="80"
        v-if="colData[7].istrue"
      >
      </el-table-column>
      <el-table-column
        prop="onOrder"
        label="已订购"
        width="80"
        v-if="colData[8].istrue"
      >
        <template slot-scope="scope">
          <span
            v-if="scope.row.onOrderflag == 1"
            style="color:red"
          >{{scope.row.onOrder}}</span>
          <span v-else>{{scope.row.onOrder}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="promised"
        label="已承诺"
        width="80"
        v-if="colData[9].istrue"
      >
      </el-table-column>
      <el-table-column
        prop="effective"
        label="有效库存"
        width="80"
        v-if="colData[10].istrue"
      >
        <template slot-scope="scope">
          <span
            v-if="scope.row.warnings == 1"
            style="color:red"
          >{{scope.row.effective}}</span>
          <span v-else>{{scope.row.effective}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="maxsafe"
        label="库存上限"
        v-if="colData[11].istrue"
      >
      </el-table-column>
      <el-table-column
        prop="safe"
        label="安全值"
        v-if="colData[12].istrue"
      >
      </el-table-column>
      <el-table-column
        prop="purchasePrice"
        label="采购价"
        v-if="colData[13].istrue"
      >
      </el-table-column>
      <el-table-column
        prop="purchasesumprice"
        label="采购总金额"
        width="100"
        v-if="colData[14].istrue"
      >
      </el-table-column>
      <el-table-column
        prop="grounding"
        label="上/下架"
        width="100"
        v-if="colData[15].istrue"
      >
      </el-table-column>
      <el-table-column
        prop="suppliername"
        width="100"
        :show-overflow-tooltip='true'
        label="供应商名称"
        v-if="colData[16].istrue"
      >
      </el-table-column>
      </el-table-column>
      <el-table-column
        prop="averagesale"
        width="100"
        label="平均销量/月"
        v-if="colData[17].istrue"
      >
      </el-table-column>
      <el-table-column
        prop="thismonth"
        width="100"
        label="当月销量"
        v-if="colData[18].istrue"
      >
      </el-table-column>
      <el-table-column
        prop="lastfirstsale"
        width="100"
        label="前1月销量"
        v-if="colData[19].istrue"
      >
      </el-table-column>
      <el-table-column
        prop="lastsecondsale"
        width="100"
        label="前2月销量"
        v-if="colData[20].istrue"
      >
      </el-table-column>
      <el-table-column
        prop="lastthirdsale"
        width="100"
        label="前3月销量"
        v-if="colData[21].istrue"
      >
      </el-table-column>
      <el-table-column
        prop="lastfourthsale"
        width="100"
        label="前4月销量"
        v-if="colData[22].istrue"
      >
      </el-table-column>
      <el-table-column
        prop="lastfifthsale"
        width="100"
        label="前5月销量"
        v-if="colData[23].istrue"
      >
      </el-table-column>
      <el-table-column
        prop="lastsixthsale"
        width="100"
        label="前6月销量"
        v-if="colData[24].istrue"
      >
      </el-table-column>
    
      </el-table-column>
      <el-table-column
        prop="days"
        width="100"
        label="可销售天数"
        v-if="colData[25].istrue"
      >
      </el-table-column>
      </el-table-column>
      <el-table-column
        prop="suggest"
        width="100"
        label="建议订货量"
        v-if="colData[26].istrue"
      >
      </el-table-column>
      <el-table-column
        prop="dull"
        width="100"
        label="预测呆滞量"
        v-if="colData[27].istrue"
      >
      </el-table-column>
    </el-table>
    
    
    javascript
    
    
![](https://ad.itadn.com/c/weblog/blog-img/images/2025-07-12/HiOZF1JfbWswD9Itzua2MBUPY74l.png)

data

复制代码 
     colData: [
        { title: '产品编号', istrue: true },
        { title: '产品OE号', istrue: true },
        { title: '产品名称', istrue: true },
        { title: '产品品牌', istrue: true },
        { title: '仓库名称', istrue: true },
        { title: '车系', istrue: true },
        { title: '车型代码', istrue: true },
        { title: '库存', istrue: true },
        { title: '已订购', istrue: true },
        { title: '已承诺', istrue: true },
        { title: '有效库存', istrue: true },
        { title: '库存上限', istrue: true },
        { title: '安全值', istrue: true },
        { title: '采购价', istrue: true },
        { title: '采购总金额', istrue: true },
        { title: '上/下架', istrue: true },
        { title: '供应商名称', istrue: true },
        { title: '平均销量/月', istrue: true },
        { title: '当月销量', istrue: true },
        { title: '前1月销量', istrue: true },
        { title: '前2月销量', istrue: true },
        { title: '前3月销量', istrue: true },
        { title: '前4月销量', istrue: true },
        { title: '前5月销量', istrue: true },
        { title: '前6月销量', istrue: true },
        { title: '可销售天数', istrue: true },
        { title: '建议订货量', istrue: true },
        { title: '预测呆滞量', istrue: true },
      ],
      colOptions: ["产品编号", "产品OE号", "产品品牌", "产品名称", "仓库名称", "车系", "车型代码", "库存", "已订购",
        "已承诺", "有效库存", "库存上限", "安全值", "采购价", "采购总金额", "上/下架", "供应商名称", "平均销量/月", "当月销量",
        "前1月销量", "前2月销量", "前3月销量", "前4月销量", "前5月销量", "前6月销量", "可销售天数", "建议订货量", "预测呆滞量"], //默认全选
      colSelect: ["产品编号", "产品OE号", "产品品牌", "产品名称", "仓库名称", "车系", "车型代码", "库存", "已订购",
        "已承诺", "有效库存", "库存上限", "安全值", "采购价", "采购总金额", "上/下架", "供应商名称", "平均销量/月", "当月销量",
        "前1月销量", "前2月销量", "前3月销量", "前4月销量", "前5月销量", "前6月销量", "可销售天数", "建议订货量", "预测呆滞量"],
    
    
    javascript
    
    
![](https://ad.itadn.com/c/weblog/blog-img/images/2025-07-12/6FC0IdnsPohgwkLZHB7JyVX8WO3m.png)

watch监听

复制代码 
     watch: {
    colOptions (valArr) {
      var arr = this.colSelect.filter(i => valArr.indexOf(i) < 0); // 未选中
      this.colData.filter(i => {
        if (arr.indexOf(i.title) != -1) {
          i.istrue = false;
          this.$nextTick(() => {
            this.$refs.tableDataRef.doLayout();
          });
        } else {
          i.istrue = true;
          this.$nextTick(() => {
            this.$refs.tableDataRef.doLayout();
          });
        }
      });
    }
      },
    
    
    javascript
    
    
![](https://ad.itadn.com/c/weblog/blog-img/images/2025-07-12/YzXLNE73A6kIoQJWvy8eKgTb9ndB.png)

弹框自己写个就可以

全部评论 (0)

还没有任何评论哟~

相关文章推荐

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

实现效果是根据弹框的多选控制table列的显示隐藏 默认全部选中，就是table全部显示，取消选择table列进行隐藏 下面是详细代码 eltable <eltable :data=tableData...

监听 el-table 列的显示与隐藏

监听eltable列的显示与隐藏 ​🎲🎲🎲 监听eltable列的显示与隐藏🪶使用按钮对话框复选框watch监听实现 🪶还有其它的方法，以下列举用watch监听的方法 代码区域 🎑按钮表格...

vue，ts 自定义el-table 动态表头显示隐藏

由于业务需求，最近客户需要一个能动态显示表格列的内容，看了网络上一些前辈写的内容感觉过于复杂，所以自己重构了一版，如果你需要的话，可以参考参考或者在此基础上做一些更改，具体思路如下： 1.传入表头数据...

JQuery ：动态隐藏显示列

<html <head <scriptsrc=jquery1.6.2.min.jstype=text/javascript</script <scripttype=text/javascript fu...

elementui table 不显示表头_Vue动态控制表格列的显示和隐藏

效果如图： 勾选表头标题是重复的、为了能看到滚动效果 vif=lists[0].ispass来判断表格列的状态每一列是否显示或隐藏勾选则展示、取消勾选隐藏、默认勾选 <eldropdown:hideo...

解决el-table表头控制显示隐藏引起的抖动

项目需求 表头内容选择项更改为字段选择，点击后可勾选（多选）控制显示内容 问题原因 eltable在重现渲染的时候，td（.cell）的高度被重新计算了，整个table的高度就发生了变化，产生抖动的效...

多重ViewPager嵌套的Fragment监听显示和隐藏监听

外层Fragment重写setUserVisibleHint方法 @Override publicvoidsetUserVisibleHintbooleanisVisibleToUser super....

elementui table 固定列_Vue动态控制表格列的显示和隐藏

效果如图： 勾选表头标题是重复的、为了能看到滚动效果 vif=lists[0].ispass来判断表格列的状态每一列是否显示或隐藏勾选则展示、取消勾选隐藏、默认勾选 <eldropdown:hideo...

Element el-table 中 type=“selection“ 的列 没法用 if 判断显示隐藏？？

你是否也遇到了Elementeltable中type=selection的列没法用if判断显示隐藏？？ 例如 /此处还有两个按钮graduate一个已毕业1一个未毕业0,需求是当已毕业的时候需要增加多...

react-native 监听页面的显示和隐藏

importReact,useState,useEffect,useCallbackfrom'react'; importuseFocusEffectfrom'@reactnavigation/nat...