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,可以自定义操作,事件返回两个值 currentRowoldCurrentRow,分别为当前行的数据和上一次选择的数据。

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
上一篇下一篇

猜你喜欢

热点阅读