解決el-table表頭控制顯示隱藏引起的抖動

項目需求

• 表頭內容選擇項更改爲 字段選擇，點擊後可勾選（多選）控制顯示內容

問題原因

• el-table在重現渲染的時候，td（.cell）的高度被重新計算了，整個table的高度就發生了變化，產生抖動的效果

解決辦法

• 給td固定一個高度

其他注意問題

1. 表頭的控制需要用v-if ，v-show是無效的，原因是v-show不支持 template 語法
2. VUE不推薦v-if和v-for同時使用，解決辦法套個template

代碼如下

 <el-popover placement="bottom" width="160" v-model="selecVisible">
    <el-tree
       ref="tree"
       :data="tableHeadChoseArr"
       show-checkbox
       accordion
       node-key="prop"
       @check-change="handleCheckChange"
       :default-checked-keys="defaultKeys"
     ></el-tree>
     <el-button slot="reference">字段選擇</el-button>
   </el-popover>
   
   <el-table
        :data="tableData.data"
        size="mini"
        @row-dblclick="tableDblclickFn"
        border
        class="table-wrap"
      >
        <template v-for="(item) in columnArr">
          <el-table-column
            :prop="item.prop"
            :label="item.label"
            :key="item.prop"
            :min-width="item.width"
            v-if="item.isShow"
          ></el-table-column>
        </template>
      </el-table>

  handleCheckChange() {
   let select = this.$refs.tree.getCheckedKeys(true)
   this.columnArr.forEach((el, i) => {
      el.isShow = select.includes(el.prop)
    })
  }

el-table .cell {
  height: 20px !important;
}

效果圖：