el-table-column动态显示隐藏

可以通过设置 el-table-column 的 prop 属性来动态控制列的显示和隐藏。具体实现方式如下：

1. 在 data 中定义一个变量，用于控制列的显示和隐藏，例如：

data() {
  return {
    showColumn: true
  }
}

2. 在 el-table-column 中绑定 prop 属性，例如：

<el-table-column
  prop="name"
  label="姓名"
  :visible="showColumn"
></el-table-column>

3. 在需要控制列显示和隐藏的地方，修改 showColumn 变量的值即可，例如：

this.showColumn = false; // 隐藏列
this.showColumn = true; // 显示列

相关问题

<el-table :data="tableData" :row-key="rowKey" border :tree-props="{children: 'children'}" :cell-class-name="dianClass" @cell-click="seeDetail" :header-cell-style="{background:'#f0f0f0'}"> <el-table-column width="50"></el-table-column> <el-table-column align="center" type="index" label="序号"> <template slot-scope="scope">{{ scope.$index + 1 }}</template> </el-table-column> <el-table-column align="center" prop="name" label="工程名称"></el-table-column> <el-table-column align="center" prop="code" label="工程编码"></el-table-column> <el-table-column align="center" prop="startDate" label="实际开工时间" :formatter="TimeFor"></el-table-column> <el-table-column align="center" prop="su" label="执行中的风险作业(A/B票)"></el-table-column> <el-table-column align="center" prop="ballNumber" label="布控球台数"></el-table-column> <el-table-column align="center" prop="toa" label="工程进度"></el-table-column> </el-table>

蓝色'}">这段代码的作用是什么？

这段代码是用来渲染一个表格的，其中包括以下几个属性：

- data：表格的数据源，即要展示的数据。
- row-key：表格行的唯一标识符，用于优化表格的渲染性能。
- border：是否显示表格的边框。
- tree-props：用于渲染树形表格，指定树形结构的子节点属性名为'children'。
- cell-class-name：用于自定义单元格的类名，可以根据数据的不同来动态添加类名。
- cell-click：单元格点击事件，可以在点击单元格时执行相应的操作。
- header-cell-style：表头单元格的样式，可以自定义表头单元格的样式，如背景色等。

el-table-column动态显示列

el-table-column可以通过动态渲染来实现动态显示列。在这个例子中，使用了Object.keys()方法获取了leave对象的所有key值列表，然后通过v-for循环遍历这个列表，动态生成el-table-column组件，并设置label属性为key值。在每个el-table-column中，使用了作用域插槽(scope)来访问每一行数据，并通过scope.row.leave[item]来获取对应列的值进行渲染。