Element UI Table: 如何根据条件隐藏标题字段 - 动态控制表格列

<template>
  <div>
    <el-checkbox v-model="isHideTitle" @change="onChangeTitle">隐藏标题字段</el-checkbox>
    <el-table :data="tableData">
      <el-table-column
        v-for="(col,index) in dataFilter"
        :key="col.id+index"
        :label="isHideTitle ? '' : col.name"
        :min-width="col.minWidth"
        :width="col.width"
        :prop="col.code"
        :align="col.align"
        :sortable="col.sortable"
        show-overflow-tooltip>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isHideTitle: false,
      tableData: [
        { xh: '1', title: '标题1' },
        { xh: '2', title: '标题2' },
        { xh: '3', title: '标题3' },
      ],
      dataFilter: [
        { id: '0', name: '序号', code: 'xh', width: 65, align: 'center', checked: true },
        { id: '1', name: '标题', code: 'title', minWidth: 200, sortable: 'custom', checked: true },
      ],
    }
  },
  methods: {
    onChangeTitle() {
      // 根据checkbox的值来改变isHideTitle的值
      this.isHideTitle = !this.isHideTitle;
    },
  },
}
</script>