elementui表格el-table自定义复选框,并给复选框增加悬浮提示
在Element UI的el-table
中自定义复选框并添加悬浮提示,可以通过使用el-table-column
的render-header
属性来自定义表头,并通过Tooltip组件来实现悬浮提示。以下是一个简单的示例:
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column type="selection" width="55">
<template slot="header" slot-scope="scope">
<el-tooltip :content="'这是自定义复选框的悬浮提示'" placement="top">
<el-checkbox
@change="handleSelectAll"
:indeterminate="isIndeterminate"
v-model="checkAll"
></el-checkbox>
</el-tooltip>
</template>
</el-table-column>
<!-- 其他列的定义 -->
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{ name: 'Tom', date: '2023-01-01', address: '上海市浦东新区' }],
checkAll: false,
isIndeterminate: false,
};
},
methods: {
handleSelectAll(value) {
this.tableData.forEach(item => {
item.checked = value;
});
this.isIndeterminate = false;
},
},
};
</script>
在这个示例中,我们定义了一个带有自定义复选框的el-table-column
,并通过render-header
插入了一个el-tooltip
组件,该组件包含了el-checkbox
。复选框的选中状态通过v-model
绑定到checkAll
属性上,并且当复选框的状态改变时,会通过@change
事件处理函数handleSelectAll
来更新数据行的选中状态。悬浮提示的内容可以根据实际需求进行修改。
评论已关闭