防止v-if和v-for一起使用，自定义表头显现

原创

小哥 3年前 (2022-11-10) 阅读数 46 #大杂烩

避免v-if和v-for同时，自定义标题显示

直接 v-if 和 v-for 同时使用，但在vue中国将优先实施v-for, 当v-for遍历所有内容后 , v-if然后删除已遍历的元素。 , 导致装载浪费。
使用计算属性将具有 isshow: false 属性的名称在传递之前被过滤掉 v-for 显示在页面上。

1.直接 v-if 和 v-for 同时使用

2.通过计算属性 v-if 和 v-for 分来使用

自定义

         
        
            
        


        
          {{item}}
        
       
         保 存
         取 消
       


  // 监听属性 类似于data概念
  computed: {
     tableColList: function () {//直接滤波器调整isshow为false数据，不会造成装载浪费。
         return this.tableCol.filter((item)=> {
             return item.isshow
         })
     }
  },

3.公用的data数据

 dialogFormVisible:false,
 tableData:[
      {
         CaseInvolved10:"张三",
         CaseInvolved2:"dsabnfind",
         CaseInvolved3:"dsabnfind",
      }
],
tableCol: [
        {isshow: true,prop: "CaseInvolved10",label:"姓名",},
        {isshow: true,prop: "CaseInvolved2",label: "性别",},
        {isshow: true,prop: "CaseInvolved3",label: "出生年月",},
],
checkList: ["姓名","性别","出生年月",],
CustomCheckbox: ["姓名","性别","出生年月",],

4.公用的methods方法

 methods: {
    //   自定义按钮
      clickCustom(){
          this.checkList=[]
          this.tableCol.forEach((item, index) => {//穿过第一层，isshow 显示而不显示
              if (item.isshow) {
                this.checkList.push(item.label)
              } 
         });
         this.dialogFormVisible = true
      },
    //   自定义保存标题
      preserveTableHeader(){
          this.tableCol.forEach((item, index) => {//穿过第一层，isshow 显示而不显示
              if (this.checkList.indexOf(item.label) > -1) {
                item.isshow = true;
              } else {
                item.isshow = false;
              }
         });
          this.dialogFormVisible = false
          this.$refs.tableData.doLayout()
      },
      // 取消自定义标题
      cancelpreserveHeader(){
        dialogFormVisible = false
      },
 }