element plus 表格el-table行多选单选

1 行多选-点击checkbox

添加一个 el-table-column,设 type 属性为 selection 即可






element plus 表格el-table行多选单选_第1张图片

2 行多选-点击checkbox或row







element plus 表格el-table行多选单选_第2张图片

3 行多选-点击checkbox或row,高亮上次选择或反选的行




element plus 表格el-table行多选单选_第3张图片

element plus 表格el-table行多选单选_第4张图片

4 以行多选的样式实现行单选-点击checkbox或row,高亮上次选择或反选的行






element plus 表格el-table行多选单选_第5张图片

存在问题:点击表头全选,会不断切换选中行

解决方案:

1.样式覆盖隐藏表头全选(略)

2.插槽实现checkbox





element plus 表格el-table行多选单选_第6张图片

5 行单选

只需要配置 highlight-current-row 属性即可实现单选






element plus 表格el-table行多选单选_第7张图片

你可能感兴趣的:(element,ui,vue,element,plus,vue.js,javascript,elementui)