iviewtable⾃定义列_iviewtable组件实现【单选】功能⾃定义 (⼀)table 组件中实现单选功能
通过 iview 官⽹可以看到，官⽅已经实现了 table 组件单选功能，那我们来看看如何使⽤吧
1.通过设置属性 highlight-row，可以选中某⼀⾏。
2.当选择时，触发事件 @on-current-change，可以⾃定义操作，事件返回两个值 currentRow 和 oldCurrentRow，分别为当前⾏的数据和上⼀次选择的数据。
changeRow(currentRow, oldCurrentRow) {
console.log(currentRow, oldCurrentRow)
}
3.通过给 columns 数据设置⼀项，指定 type: 'index'，可以⾃动显⽰⼀个从 1 开始的索引列。使⽤ indexMethod 可以⾃定义序号。voip业务
columns3: [{
type: 'index',
width: 60,
align: 'center',
indexMethod: (row) => {
return row._index * 2
}
}],
4.给 data 项设置特殊 key _highlight: true 可以默认选中当前项。
data1: [{
name: 'John Brown',
age: 18,
address: 'New York No. 1 Lake Park',
date: '2016-10-03',
_highlight: true
}]
5.调⽤ clearCurrentRow ⽅法可以⼿动清除选中项。
Clear
独览梅花扫腊雪
clearCurrentRow： 清除⾼亮项，仅在开启 highlight-row 时可⽤
handleClearCurrentRow () {
this.$refs.currentRowTable.clearCurrentRow();
},
详细案例，参考 iview 官⽹ table 组件 单选案例
CHINESEGEY霸道太子
(⼆)table 组件中实现⾃定义单选样式功能
1.对于选择样式的修改：
row-class-name
⾏的 className 的回调⽅法，传⼊参数：
row：当前⾏数据
index：当前⾏的索引
Function
-
rowClassName1(row, index){
if (this.currentSelection1 === index){
return 'selected'; // 选择样式 class
} else {
return '';
}
},
2.点击单⾏事件：
on-row-click
单击某⼀⾏时触发
当前⾏的数据
index
rowClick1(data, index){
诚成文化if (this.currentSelection1 === index){
this.currentSelection1 = ''; //双击取消
}else {
this.currentSelection1 = index; // 单击切换
}
},1864评价
扩展：
(1)table 组件如何指定⾏列样式呢？row-class-name
(2)那 table 组件，如何根据某⼀个列中的状态变换不同的字体颜⾊？columns3: [{
title: '业主项⽬部',
key: 'yzxmb',
jis标准
align: "center",
tooltip: true,
render: function(h, params) { return h('span', {
style: {
color: '#00FFFF'
}
})
}
}],
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议