vue3 el-table-column 列头添加 图标按钮

在 Vue3 中使用 `el-table`（Element Plus 的组件）时，动态设置列（column）是一个常见的需求，特别是在需要根据用户操作或数据变化来调整表格展示的场景中。可以通过动态绑定 `columns` 数据并结合 `v-for` 来实现。 ### 动态设置列的方法 #### 1. 使用响应式数据绑定列 可以通过 `ref` 和响应式数据（如 `reactive` 或 `ref`）来管理列数据，并在需要时更新它。例如： ```vue <template> <el-table :data="tableData" style="width: 100%"> <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label" /> </el-table> </template> <script setup> import { ref, reactive } from &#39;vue&#39;; const tableData = ref([ { name: &#39;Alice&#39;, age: 25, city: &#39;New York&#39; }, { name: &#39;Bob&#39;, age: 30, city: &#39;San Francisco&#39; }, { name: &#39;Charlie&#39;, age: 28, city: &#39;London&#39; } ]); const columns = reactive([ { prop: &#39;name&#39;, label: &#39;Name&#39; }, { prop: &#39;age&#39;, label: &#39;Age&#39; } ]); // 动态添加一列 setTimeout(() => { columns.push({ prop: &#39;city&#39;, label: &#39;City&#39; }); }, 3000); </script> ``` 在这个示例中，`columns` 是一个响应式数组，初始时包含两列（`name` 和 `age`）。通过 `setTimeout`，三秒后向 `columns` 数组中添加 `city` 列，从而动态更新表格的列。 #### 2. 使用条件渲染控制列显示 如果需要根据某些条件动态显示或隐藏列，可以结合 `v-if` 来实现： ```vue <el-table :data="tableData" style="width: 100%"> <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label" v-if="column.visible" /> </el-table> <script setup> import { ref, reactive } from &#39;vue&#39;; const tableData = ref([ { name: &#39;Alice&#39;, age: 25, city: &#39;New York&#39; }, { name: &#39;Bob&#39;, age: 30, city: &#39;San Francisco&#39; }, { name: &#39;Charlie&#39;, age: 28, city: &#39;London&#39; } ]); const columns = reactive([ { prop: &#39;name&#39;, label: &#39;Name&#39;, visible: true }, { prop: &#39;age&#39;, label: &#39;Age&#39;, visible: true }, { prop: &#39;city&#39;, label: &#39;City&#39;, visible: false } ]); // 动态显示 city 列 setTimeout(() => { columns.find(column => column.prop === &#39;city&#39;).visible = true; }, 3000); </script> ``` 在这个示例中，`city` 列初始时被隐藏（`visible: false`），三秒后通过修改 `visible` 属性使其显示。 #### 3. 使用函数动态调整列 可以定义一个函数来动态调整列的配置，例如切换列的显示状态： ```vue <template> <el-button @click="toggleColumn(&#39;city&#39;)">Toggle City Column</el-button> <el-table :data="tableData" style="width: 100%"> <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label" v-if="column.visible" /> </el-table> </template> <script setup> import { ref, reactive } from &#39;vue&#39;; const tableData = ref([ { name: &#39;Alice&#39;, age: 25, city: &#39;New York&#39; }, { name: &#39;Bob&#39;, age: 30, city: &#39;San Francisco&#39; }, { name: &#39;Charlie&#39;, age: 28, city: &#39;London&#39; } ]); const columns = reactive([ { prop: &#39;name&#39;, label: &#39;Name&#39;, visible: true }, { prop: &#39;age&#39;, label: &#39;Age&#39;, visible: true }, { prop: &#39;city&#39;, label: &#39;City&#39;, visible: false } ]); const toggleColumn = (prop) => { const column = columns.find(column => column.prop === prop); if (column) { column.visible = !column.visible; } }; </script> ``` 在这个示例中，点击按钮可以切换 `city` 列的显示状态。 --- ### 总结 在 Vue3 中动态设置 `el-table` 的列可以通过以下方法实现： - 使用响应式数据（如 `reactive` 或 `ref`）管理列配置。 - 结合 `v-for` 动态渲染列。 - 使用 `v-if` 控制列的显示与隐藏。 - 定义函数动态调整列的状态。 通过这些方法，可以灵活地实现列的动态管理，满足不同的业务需求。