含有复选框的表格显示与隐藏切换

点击切换按钮表格显示与隐藏

如果使用v-if，注意使用this.nextTick，并且this.nextTick 放的位置在里面，不要显示表格的时候就使用this.

toggleRowSelection 无效，并影响下一次循环

代码语言：javascript复制

    <el-table
      v-if="isShowTable"
      :data="tableData3"
      style="width: 500px"
      height="250"
      border
      id="table"
      ref="multipleTable"
      @selection-change="handleSelectionChange"
    >

代码语言：javascript复制

    handleSelectionChange(selection) {
      this.selectedTableRow = selection;
      console.log(this.selectedTableRow);
    },

代码语言：javascript复制

    handleChange() {
      this.isShowTable = !this.isShowTable;       
      if (this.isShowTable) {
         this.$nextTick(() => {                    
          for (let i = 0; i < this.tableData3.length; i  ) {
            for (let j = 0; j < this.selectedTableRow.length; j  ) {
              console.log(this.selectedTableRow)
              if (this.tableData3[i].zip == this.selectedTableRow[j].zip) {
                   this.$refs.multipleTable.toggleRowSelection(this.tableData3[i]);
                   })               
              }
            }
          }                 
       });
      }
    },

刚开使用上面的代码，发现显示的选中行有问题，改成下面的代码，把 this.$nextTick 放到toggleRowSelection中外面，就可以正常显示

代码语言：javascript复制

    handleChange() {
      this.isShowTable = !this.isShowTable;     
      if (this.isShowTable) {
       // this.$nextTick(() => {          
          for (let i = 0; i < this.tableData3.length; i  ) {
            for (let j = 0; j < this.selectedTableRow.length; j  ) {
              console.log(this.selectedTableRow)
              if (this.tableData3[i].zip == this.selectedTableRow[j].zip) {
                   this.$nextTick(() => {
                     // 没有生成Dom 影响下一次循环执行
                     this.$refs.multipleTable.toggleRowSelection(this.tableData3[i]);
                   })
               
              }
            }
          }         
       // });
      }

如果数据没有变化可以使用v-show

代码语言：javascript复制

    <el-table
      v-show="isShowTable"
      :data="tableData3"
      style="width: 500px"
      height="250"
      border
      id="table"
      ref="multipleTable"
      @selection-change="handleSelectionChange"
    >

代码语言：javascript复制

    handleChange() {
      this.isShowTable = !this.isShowTable;
    }

toggle 表格

0 人点赞