iView表格行单选
2019-10-19 本文已影响0人
漫漫江雪
<Table ref="orgTable" class="app-table-normal app-table-modal" height="260" highlight-row
@on-current-change="changeSelectedOrg" :columns="orgtablecol" :data="searchOrgList"></Table>
通过设置属性 highlight-row
,可以选中某一行。
当选择时,触发事件 @on-current-change
,可以自定义操作,事件返回两个值 currentRow
和 oldCurrentRow
,分别为当前行的数据和上一次选择的数据。
export default {
data() {
return {
selectedOrgItem: null,
orgtablecol: [
{ key: 'orgName', title: '', width: 70, align: 'center', render:(h,params)=> {
let v = (this.selectedOrgItem && this.selectedOrgItem.id === params.row.id)? true: false
return h('radio',{props: {value: v}})
} },
{ key: 'orgName', title: '机构名称', align: 'center', ellipsis: true, tooltip: true }
],
}
},
methods: {
changeSelectedOrg(currentRow,oldCurrentRow) {
this.selectedOrgItem = currentRow
},
}
}
image.png