可以通过在 <el-table>
中设置 show-header
属性为 true
,然后在 <el-table-column>
中设置 type="selection"
,再通过在 <el-table-column>
中添加一个自定义的 header
插槽来实现在表头复选框后面加上“全选”两个字。
具体实现代码如下:
<template>
<el-table :data="tableData" show-header>
<el-table-column type="selection" align="center" width="55">
<template slot="header">
<div>全选</div>
</template>
</el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</template>
上面的代码中,我们在 <el-table>
上设置了 show-header
属性为 true
,这个属性的作用是显示表头,然后在 <el-table-column>
中设置 type="selection"
来表示这一列是用来展示复选框的列,通过设置 align="center"
和 width="55"
来控制复选框的样式和宽度,最后在 <el-table-column>
中添加一个自定义的 header
插槽来显示“全选”文本。