本文介绍在Vue.js结合Element UI组件库中，如何操作表格（table）获取TR行对象的常见案例，适用于需要对表格数据进行交互和处理的场景。
一.table组件的方法，事件
二.常用的事件，属性
(一).属性
1.多选框(type = "selection") 需要实现勾选的功能
在 内加入
2. :data="tableData" 是table的数据绑定
export default {
data() {
return{
tableData: [],
}
}
}
3.formatter 用来格式化内容
对table的值进行处理。Function(row, column, cellValue, index){}
A.使用formatter需要注意以下几点：
①无论formatter出何种形式，格式化出的DOM一定都是被包含在默认的div标签内
②在写formatter函数时要保证有值返回，否则单元格没有内容可展示，所以if的时候别忘了else
③formatter函数不会作用在列属性checkbox为true的单元格上，checkbox列是组件预留的。
export default {
data() {
return {
tableData3: [{
id:'1',
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
IsAudit:0,
sex:'1'
}, {
id:'2',
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
IsAudit:1,
sex:'0'
}, {
id:'3',
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
IsAudit:10,
sex:'-1'
}]
}
},
mounted() {
},
methods: {
formatSex: function (row, column, cellValue, index) {
return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
},
//状态改成汉字
formatterColumn(row, column) {
switch(row.IsAudit){
case 0:
return '未通过';
break;
case 1:
return '审核通过';
break;
case 10:
return '待审核';
break;
case 9:
return '草稿';
break;
default:
return '未知';
}
}
}
}
image.png
4.selectable (row, index) 是否可以选中
注意：仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选
使用：
export default {
methods: {
selectable(row, index){
if(index === 1){
return true;
}else{
return false;
}
}
}
}
只有第二条是可以选中 其他不能
image.png
(二).方法
1.row-click 点击行事件
handleRowChange(row, e
最低0.47元/天 解锁文章
373
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
