有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

el-table选中某一行操作(Table 表格选中数据的坑)填坑日记

vue 炮渣日记 2周前 (11-22) 105次浏览 已收录 0个评论 扫描二维码

Element – Table 表格

用于展示多条结构类似的数据,可对数据进行排序、筛选、对比或其他自定义操作。

实现多选非常简单: 手动添加一个el-table-column,设type属性为selection即可;默认情况下若内容过多会折行显示,若需要单行显示可以使用show-overflow-tooltip属性,它接受一个Boolean,为true时多余的内容会在 hover 时以 tooltip 的形式显示出来。

①添加一个表头 设置其类型 type=”selection”,并设置表格的ref (ref可以获取表格的dom元素),给表格添加选中的方法@selection-change

el-table选中某一行操作(Table 表格选中数据的坑)填坑日记

②但是只有这些,并不能完全做到表格的多选,当前表格的数据发生变化时,之前选中的数据会被清空,当再次出现相同的数据时,并不会自动选中,所以要添加一个表格选中的方法,当页面出现之前选择过的数据时,页面会再次选中。

el-table选中某一行操作(Table 表格选中数据的坑)填坑日记

③注意:在设置表格数据再次选中的方法时需要加上 this.$nextTick这个方法。

this.$nextTick这个方法作用是当数据被修改后使用这个方法会回调获取更新后的dom再渲染出来

el-table选中某一行操作(Table 表格选中数据的坑)填坑日记

el-table选中某一行操作(Table 表格选中数据的坑)填坑日记
喜欢 (1)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址