vue中控制element表格列的显示与隐藏

不爱吃糖的程序媛

发布于 2024-01-18 21:42:26

3030

发布于 2024-01-18 21:42:26

文章被收录于专栏：夏天的前端笔记夏天的前端笔记

背景

根据‘执行进度计算方式’的单选框里面的选项不同，展示不同的column

按最小制剂单位统计:

按含量统计:

实现方式

就是拿到选项框里面的值，再根据里面的值来判断哪些column显示和隐藏；关于显示和隐藏可以设置变量；

<-----主要代码部分----->
 <el-table-column
   label="任务量（片/粒/支）"
    min-width="160"
    prop="taskNum"
    show-overflow-tooltip
    v-if="showColumn.taskNum">
 </el-table-column>
 <el-table-column
	label="任务量（按含量计）"
    min-width="150"
    prop="deliveryNumMg"
    show-overflow-tooltip
    v-if="showColumn.deliveryNumMg"
 ></el-table-column>
   label="执行进度（%）（按最小制剂单位统计）"
    min-width="160"
    prop="executionProgressNumDelivery"
    show-overflow-tooltip
    v-if="showColumn.executionProgressNumDelivery">
 </el-table-column>
 <el-table-column
	label="执行进度（%）（按含量统计）"
    min-width="150"
    prop="executionProgressSpecDelivery"
    show-overflow-tooltip
    v-if="showColumn.executionProgressSpecDelivery"
 ></el-table-column>

<script>
const showColumn={
    taskNum:true,
    deliveryNumMg:true,
    executionProgressNumDelivery:true,
    executionProgressSpecDelivery:true,
  };
export default {
  data() {
    return {
      showColumn,//定义一个变量
      }
   },
 methods: {
    //根据执行进度计算方式条件不同显示column
    changeTableShow(val){
     if(val==='按最小制剂单位统计'){
      this.showColumn.taskNum=true;
      this.showColumn.deliveryNumMg=false;
      this.showColumn.executionProgressNumDelivery=true;
      this.showColumn.executionProgressSpecDelivery=false;
     } else if(val==='按含量统计'){
      this.showColumn.taskNum=false;
      this.showColumn.deliveryNumMg=true;
      this.showColumn.executionProgressNumDelivery=false;
      this.showColumn.executionProgressSpecDelivery=true;
     }else{
      this.showColumn.taskNum=true;
      this.showColumn.deliveryNumMg=true;
      this.showColumn.executionProgressNumDelivery=true;
      this.showColumn.executionProgressSpecDelivery=true;
     }
    },
   }

本文参与?腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2024-01-18，如有侵权请联系 cloudcommunity@tencent.com 删除

表格