elementui table表头部分栏位动态

您可以使用 ElementUI 的作用域插槽（Scoped Slot）来动态渲染表头的每一列。具体实现步骤如下： 1. 在 `el-table-column` 标签中使用 `slot-scope` 属性来定义作用域插槽。 2. 在作用域插槽中使用 `header` 插槽来渲染表头内容，并通过 `props.column` 访问当前表头列的信息。 例如，以下代码可以实现动态添加表头列的功能： ``` <template> <el-table :data="tableData"> <el-table-column v-for="(column, index) in dynamicColumns" :key="index" :label="column.label" :prop="column.prop" :width="column.width" :sortable="column.sortable" :index="column.index" :formatter="column.formatter" :show-overflow-tooltip="column.showOverflowTooltip" :align="column.align" :header-align="column.headerAlign" :class-name="column.className" :label-class-name="column.labelClassName" :reserve-selection="column.reserveSelection" :fixed="column.fixed" :resizable="column.resizable" :column-key="column.columnKey" :filters="column.filters" :filter-placement="column.filterPlacement" :filter-multiple="column.filterMultiple" :filter-method="column.filterMethod" :filtered-value="column.filteredValue" :render-header="renderHeader(column)" ></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { name: 'John', age: 22, address: 'New York' }, { name: 'Jane', age: 23, address: 'London' }, { name: 'Bob', age: 25, address: 'Paris' } ], dynamicColumns: [ { label: 'Name', prop: 'name', width: '100px' }, { label: 'Age', prop: 'age', width: '100px' } ] } }, methods: { renderHeader(column) { if (column.prop === 'address') { return ( <div> { column.label } <el-button size="mini" type="text" icon="el-icon-plus" onClick={() => this.addColumn()}></el-button> </div> ) } else { return column.label } }, addColumn() { this.dynamicColumns.push({ label: 'Address', prop: 'address', width: '100px' }) } } } </script> ``` 在上述代码中，我们首先定义了一个 `dynamicColumns` 数组来存储动态添加的表头列信息。然后，在 `el-table-column` 标签中使用 `render-header` 属性来渲染表头内容，通过 `renderHeader` 方法来判断是否需要添加按钮，并在按钮点击事件中动态添加表头列。最后，我们通过 `v-for` 指令来动态渲染表格列。 注意：这里使用了 JSX 语法，如果你不熟悉可以先学习一下。