已解决
el-table表格的一些操作-表格实现单选、多选
来自网友在路上 156856提问 提问时间:2023-10-21 16:24:31阅读次数: 56
最佳答案 问答题库568位专家为你答疑解惑
表格实现多选
<el-table:data="dataList"border@selection-change="handleSelectionChange">//多选框<el-table-column type="selection" width="55" align="center" /></el-table>
handleSelectionChange(val) {console.log(val);},
参数说明:
dataList:表格渲染的数据
handleSelectionChange:获取所有选中行的数据方法
表格实现单选
<el-table :data="dataList" border><el-table-column width="50px" label="选择" align="center"><template scope="scope"><el-radio:label="scope.row.id"v-model="radio"@change.native="handleSelectionChange(scope.$index, scope.row)">{{ "" }}</el-radio></template></el-table-column>
</el-table>
handleSelectionChange(index,row){console.log(row);console.log(index);
}
①绑定使用唯一值id进行绑定数据,保证数据唯一性。
(不然好多行被选中)
②因为label的显示原因,会默认将数据id显示出来。
el-radio标签里必须写{{ "" }}或{{}},否则单选按钮后面会出现scope.row.id
③change.native方法:
.native 官网解释:
你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native 。④data里面radio设置初始值"",若哪一行想默认选中,radio设置初始值为该行的id
查看全文
99%的人还看了
相似问题
猜你感兴趣
版权申明
本文"el-table表格的一些操作-表格实现单选、多选":http://eshow365.cn/6-20930-0.html 内容来自互联网,请自行判断内容的正确性。如有侵权请联系我们,立即删除!
- 上一篇: 房地产行业程序员管理痛点分析
- 下一篇: UE5场景逐渐变亮问题