将表头单元格展示为复选框,行内单元格正常展示,不需要type="selection"的列,选中该列表的表头的复选框,点击删除列可以删除整列
时间: 2024-10-20 14:15:28 浏览: 11
为了实现这样的需求,你需要在HTML结构上稍作调整,移除默认的`type="selection"`列,并为表头添加独立的复选框。当用户选中表头的复选框时,可以借助JavaScript来控制行内数据的行为以及响应“删除列”按钮。以下是相应的代码实现:
```html
<template>
<div>
<el-checkbox
v-model="selectAll"
@change="toggleSelectAll"
:indeterminate="indeterminate"
class="select-all-header"
>
全选
</el-checkbox>
<el-table :data="paramTableData" :style="{ width: '100%' }">
<el-table-column
prop=""
label=""
width="50"
align="center"
show-overflow-tooltip
:formatter="formatCheckboxes"
></el-table-column>
<el-table-column v-for="(item, index) in activeColumn" :key="item" :prop="item" :label="item">
<template slot-scope="scope">
<span>{{ scope.row[item] }}</span>
</template>
</el-table-column>
<el-table-column fixed="right" label="操作">
<template slot-scope="scope">
<el-button size="small" @click="deleteColumn(index)">
删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
paramTableData: [], // 数据源
activeColumn: [], // 表头配置
selectAll: false,
indeterminate: false, // 是否存在部分被选中的状态
selectedItems: [], // 存储选中的列
};
},
methods: {
formatCheckboxes(row, column) {
if (!column.prop) return;
return `<input type="checkbox" v-model="row.${column.prop}" />`;
},
toggleSelectAll() {
this.selectAll = !this.selectAll;
this.indeterminate = false; // 清除非全选和全选以外的状态
this.updateSelectedItems();
},
deleteColumn(index) {
this.paramTableData.forEach((row) => {
delete row[this.activeColumn[index]];
});
this.activeColumn.splice(index, 1); // 移除已选中的列
},
updateSelectedItems() {
this.selectedItems = [];
this.paramTableData.forEach((row) => {
if (Object.keys(row).some((key) => row[key])) {
this.selectedItems.push(key);
}
});
},
},
};
</script>
```
在这个例子中:
1. `formatCheckboxes`方法在行首插入一个复选框,其`v-model`关联到了对应的数据字段。
2. 表头的全选复选框控制了所有行的选中状态,通过`toggleSelectAll`方法更新所有行的选中状态并更新`selectedItems`。
3. “删除列”按钮触发`deleteColumn`方法,从数据源中移除指定列。
4. `updateSelectedItems`方法维护选中的列集合。
注意:由于复选框不是真正的表头列,因此在删除列时可能会导致数据结构发生变化。如果需要保持数据的完整性,可以根据实际需求调整这部分逻辑。
阅读全文