【自定义列表头】vue el-table表格自定义列显示隐藏，多级表头自定义列显示隐藏，自由搭配版本和固定列版本【注释详细】

在Vue中使用Element UI的el-table组件时，可以通过el-table-column组件的v-if指令来实现自定义列的显示和隐藏。同时，Element UI支持多级表头，可以通过嵌套el-table-column组件来实现。

以下是一个实现自定义列显示和隐藏，以及多级表头的示例代码：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
 
    <!-- 自定义列显示隐藏 -->
    <el-table-column v-if="showAddress" prop="address" label="地址"></el-table-column>
 
    <!-- 多级表头 -->
    <el-table-column label="用户信息">
      <el-table-column prop="user.userName" label="用户名"></el-table-column>
      <el-table-column prop="user.age" label="年龄"></el-table-column>
    </el-table-column>
  </el-table>
 
  <!-- 控制显示隐藏的开关 -->
  <el-checkbox v-model="showAddress">显示地址列</el-checkbox>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        // ... 数据项
      ],
      showAddress: true // 控制地址列显示隐藏的标志
    };
  }
};
</script>

在这个例子中，showAddress是一个响应式数据，用于控制地址列的显示和隐藏。通过v-if指令，我们可以根据showAddress的值来决定是否渲染地址列。同时，我们可以使用Element UI提供的el-checkbox组件来控制showAddress的值，从而实现用户对列的显示隐藏进行交互。

对于多级表头，我们通过嵌套el-table-column组件来实现，每一级都可以有自己的表头和数据列。