这篇文章主要介绍了iview-table中radio（单选框）的使用。

问题描述

table组件中添加如下方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
radioSupport(item) {
    item.render = (h, params) => {
        let id = params.row._rowKey
        return h('div', [
            h('Radio', {
                props: {
                    value: id === utils.radioId // 定义一个全局变量 存放当前选中的radio的id
                },
                on: {
                    'on-change': () => {
                        utils.radioId = id // 给radioId赋值
                        this.handleRadio(params.row)
                    }
                }
            })
        ])
    }
}

父组件调用方法：

1
2
3
handleRadio: function(row) {
    this.$emit('on-radio', row)
}

使用render函数在tableColumns中使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 先定义一个全局变量
var radioId = null

{
    title: '选择',
    align: 'center',
    key: 'radioId', // 这个不是必须的，可以不要key
    render: (h, params) => {
        let id = params.row._rowKey
        return h('div', [
            h('Radio', {
                props: {
                    value: id === radioId // 定义一个全局变量 存放当前选中的radio的id
                },
                on: {
                    'on-change': () => {
                        radioId = id // 给radioId赋值
                        this.handleRadio(params.row)
                    }
                }
            })
        ])
    }
}