记录表格数据列筛选展示，以及el-table剧烈抖动的问题

前言:
页面表格在展示数据的时候如果列数很多那么看起来就会很不方便，而且每个用户可能关注的相关列信息都不一样，会造成用户体验差

<el-popover placement="right" title="列筛选" trigger="click" width="420">                        
      	<el-checkbox-group v-model="checkedColumns" size="mini">
		    <el-checkbox v-for="item in checkBoxGroup" :key="item" :label="item" :value="item"></el-checkbox>
        	</el-checkbox-group>
	          <el-button slot="reference" type="primary" size="small" plain><i class="el-icon-arrow-down el-icon-menu" />列表项展示筛选</el-button>
          </el-popover>

        
        <el-table stripe
      :data="pageTicket"
      style="width: 100%">
      <af-table-column
        prop="id"
        label="ID"
        align="center"
        v-if="colData[0].istrue"
        
        >
      </af-table-column>
      <af-table-column
        prop="status"
        label="Status"
        align="center"
        v-if="colData[1].istrue"
       >
      </af-table-column>
      <af-table-column
        prop="ticket_type"
        label="Type"
        align="center"
        v-if="colData[2].istrue"
        >
      </af-table-column>
      <af-table-column
        prop="submitted_time"
        label="Submitted Time"
        align="center"
        v-if="colData[3].istrue"
        >
      </af-table-column>
      <af-table-column
        prop="title"
        label="Title"
        align="center"
        v-if="colData[4].istrue"
        >
      </af-table-column>
     
    </el-table>
   


<script>
export default {
  data() {
    return {
      //列表动态隐藏
	  colData: [
	      { title: "ID", istrue: true },
	      { title: "Status", istrue: true },
	      { title: "Type", istrue: true },
	      { title: "Submitted Time", istrue: true },
	      { title: "Title", istrue: true },	     
	  ],

      checkBoxGroup: [],
	  checkedColumns: [],
	  pageTicket:[],//这是从后端接口获取的在表格要展示的数据
	  }


	    created() {            
	    // 列筛选
	    this.colData.forEach((item, index) => {
	        this.checkBoxGroup.push(item.title);
	        this.checkedColumns.push(item.title);
	    })
	    this.checkedColumns = this.checkedColumns
	    let UnData = localStorage.getItem(this.colTable)
	    UnData = JSON.parse(UnData)
	    if (UnData != null) {
	        this.checkedColumns = this.checkedColumns.filter((item) => {
	            return !UnData.includes(item)
	        })
	    }
	},
 		 // 监控列隐藏
  		watch: {
      	checkedColumns(val,value) {
          let arr = this.checkBoxGroup.filter(i => !val.includes(i)); // 未选中
          localStorage.setItem(this.colTable, JSON.stringify(arr))
          this.colData.filter(i => {
              if (arr.indexOf(i.title) != -1) {
                  i.istrue = false;
              } else {
                  i.istrue = true;
              }
          });
      }
  },
  
</script>

另外在实现该功能的时候会出现表格上下剧烈的抖动，在网上找了很多方法都解决不了这个问题，最后试了很多方法才解决了这个bug

<script>
<div class="tableArea">
        <el-table stripe
      :data="pageTicket"
      style="width: 100%"
      :key="toggleIndex">
      <af-table-column
        prop="id"
        label="ID"
        align="center"
        v-if="colData[0].istrue"
        
        >
      </af-table-column>
      <af-table-column
        prop="status"
        label="Status"
        align="center"
        v-if="colData[1].istrue"
       >
      </af-table-column>
      <af-table-column
        prop="ticket_type"
        label="Type"
        align="center"
        v-if="colData[2].istrue"
        >
      </af-table-column>
      <af-table-column
        prop="submitted_time"
        label="Submitted Time"
        align="center"
        v-if="colData[3].istrue"
        >
      </af-table-column>
      <af-table-column
        prop="title"
        label="Title"
        align="center"
        v-if="colData[4].istrue"
        >
      </af-table-column>
 
    </el-table>
    </div>
<script>




<style >

.el-table {
  
  display: table-cell !important;

}

</style>

这里记录一下

效果如下: