el-table不含多选框多选选中行高亮
时间: 2023-07-24 21:25:47 浏览: 51
您好!针对您的问题,可以通过el-table的highlight-current-row属性来实现选中行高亮显示。而多选框则可以通过el-table-column中的type属性指定为selection来添加。具体实现可以参考以下代码:
```
<el-table :data="tableData" highlight-current-row>
<el-table-column type="selection"></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="gender" label="性别"></el-table-column>
</el-table>
```
在以上代码中,highlight-current-row属性用来实现选中行高亮显示,而el-table-column中的type属性指定为selection来添加多选框。希望能够帮到您!
相关问题
el-table多选选中行高亮
您好!针对您的问题,可以通过el-table的highlight-current-row属性来实现选中行高亮显示。而多选框则可以通过el-table-column中的type属性指定为selection来添加。具体实现可以参考以下代码:
```
<el-table :data="tableData" highlight-current-row @selection-change="handleSelectionChange">
<el-table-column type="selection"></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="gender" label="性别"></el-table-column>
</el-table>
```
在以上代码中,highlight-current-row属性用来实现选中行高亮显示,而el-table-column中的type属性指定为selection来添加多选框。同时,我们还需要在el-table上添加@selection-change事件,来处理选择变化的逻辑。具体实现方法可以参考以下代码:
```
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 18, gender: '男' },
{ name: '李四', age: 20, gender: '女' },
{ name: '王五', age: 22, gender: '男' },
{ name: '赵六', age: 24, gender: '女' }
],
selectedRows: []
};
},
methods: {
handleSelectionChange(rows) {
this.selectedRows = rows;
}
}
};
</script>
```
在以上代码中,我们通过selectedRows数组来保存选中的行数据,并在handleSelectionChange方法中更新该数组。希望能够帮到您!
el-table-column点击行高亮
要实现 el-table-column 点击行高亮,可以通过设置 table 的 highlight-current-row 属性为 true,然后在 el-table-column 中设置 selectable 属性为 true。这样就可以实现点击行高亮了。
示例代码如下:
```
<el-table :data="tableData" highlight-current-row>
<el-table-column type="selection" selectable></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
```