Vue开发--Element 的Table组件判断当前是勾选状态还是取消勾选状态
2019-06-12 10:44
1156 查看
实现多选非常简单: 手动添加一个el-table-column,设type属性为selection即可;默认情况下若内容过多会折行显示,若需要单行显示可以使用show-overflow-tooltip属性,它接受一个Boolean,为true时多余的内容会在 hover 时以 tooltip 的形式显示出来。
<template> <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @select='onTableSelect' /*判断当前表格勾选的是选中的还是取消选中的 */ @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column label="日期" width="120"> <template slot-scope="scope">{{ scope.row.date }}</template> </el-table-column> <el-table-column prop="name" label="姓名" width="120"> </el-table-column> <el-table-column prop="address" label="地址" show-overflow-tooltip> </el-table-column> </el-table> <div style="margin-top: 20px"> <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button> <el-button @click="toggleSelection()">取消选择</el-button> </div> </template> <script> export default { data() { return { tableData: [{ date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-08', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-06', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-07', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }], multipleSelection: [] } }, methods: { toggleSelection(rows) { if (rows) { rows.forEach(row => { this.$refs.multipleTable.toggleRowSelection(row); }); } else { this.$refs.multipleTable.clearSelection(); } }, handleSelectionChange(val) { this.multipleSelection = val; }, onTableSelect(rows, row) { let selected = rows.length && rows.indexOf(row) !== -1 console.log(selected) // true就是选中,0或者false是取消选中 } } } </script>
相关文章推荐
- vue--element-ui--tree组件解决从外部按钮取消选中状态
- 【ios开发】如何判断当前网络连接状态(网络是否正常)
- iPhone开发之判断当前的网络状态
- 判断VideoDisplay组件当前的播放状态。播放|缓冲。
- 判断当前应用程序状态是在前台还是后台
- Android开发经验一判断当前屏幕是全屏还是非全屏
- vue+element ui 使用$refs获取el-dialog 下的 el-table 组件 ,以及使用table多选,默认选中
- Android开发之adb && 破解开屏图案 && 代码判断当前是否处于锁屏状态并绕过解锁页面
- iOS开发-判断当前视图操作是push还是pop
- vue+element的table组件学习模板
- Android开发经验一判断当前屏幕是全屏还是非全屏
- 判断模块当前状态是显示还是隐藏
- 判断VideoDisplay组件当前的播放状态。播放|缓冲。
- Android判断APP当前状态,处于前台还是后台或者未启动
- iPhone开发 判断当前的网络是3g还是wifi
- 解决element-ui中el-menu组件作为vue-router模式在刷新页面后default-active属性与当前路由页面不一致问题的方法
- iOS 开发判断监测当前网络状态
- 如何判断键盘当前的输入状态是大写还是小写
- iPhone开发 判断当前的网络是3g还是wifi
- 判断VideoDisplay组件当前的播放状态。播放|缓冲。