iview table 自定义列_iview table 组件实现【单选】功能自定义样式

(一)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 可以自定义序号。

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',

_highli