element-ui table 表格控件实现单选功能

项目中实现 table 表格控件单选功能，如图：

基本代码如下：

1、template 代码中：

注意：

 

这里写   的目的是为了页面不显示内容，只显示单选操作

2、data 代码中：

data() {
    return {
        templateSelection: '',
        // 返回数据
        tableData: [
            {
                'id': 1,
                'title': '嘿嘿嘿',
                'priority': '高',
                'state': 1,
                'dealingPeople': '小龙女'
                },
            {
                'id': 2,
                'title': '嘻嘻嘻',
                'priority': '中',
                'state': 2,
                'dealingPeople': '小龙女'
            },
            {
                'id': 3,
                'title': '哈哈哈',
                'priority': '低',
                'state': 3,
                'dealingPeople': '小龙女'
            },
            {
                'id': 3,
                'title': '哈哈哈',
                'priority': '低',
                'state': 3,
                'dealingPeople': '小龙女'
            },
            {
                'id': 3,
                'title': '哈哈哈',
                'priority': '低',
                'state': 3,
                'dealingPeople': '小龙女'
            },
            {
                'id': 3,
                'title': '哈哈哈',
                'priority': '低',
                'state': 3,
                'dealingPeople': '小龙女'
            }
        ]
    }
}

3、methods 代码中：

singleElection (row) {
    this.templateSelection = this.tableData.indexOf(row);
    this.templateRadio = row.id;
},