el-table 表头单选筛选框
时间: 2023-08-19 18:08:42 浏览: 78
您可以使用 el-table 的 column 插槽来自定义表头的筛选框。在 column 插槽中,您可以使用 el-checkbox 组件来创建单选筛选框。
首先,您需要在 el-table 的 column 中设置 filterable 属性为 true,这将启用列的筛选功能。然后,在 column 插槽中,您可以使用 el-checkbox 组件来创建单选筛选框。您可以将 el-checkbox 组件的选中状态绑定到一个变量,以便在选择时更新筛选条件。
下面是一个示例代码:
```html
<template>
<el-table :data="tableData">
<el-table-column
prop="name"
label="Name"
filterable
>
<template slot="header" slot-scope="scope">
<el-checkbox v-model="nameFilter" @change="handleFilterChange('name')">{{ scope.column.label }}</el-checkbox>
</template>
</el-table-column>
<!-- 其他列 -->
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: 'John' },
{ name: 'Jane' },
{ name: 'Bob' },
],
nameFilter: [],
};
},
methods: {
handleFilterChange(column) {
// 根据选择的筛选条件进行处理
// 更新表格数据或其他操作
},
},
};
</script>
```
在上面的示例中,我们创建了一个名为 nameFilter 的变量来保存筛选框的选中状态。当筛选框的选中状态发生变化时,会触发 handleFilterChange 方法进行处理。
请根据您的实际需求调整代码,并将其应用到您的项目中。希望对您有帮助!