element 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;
},

到此这篇关于element table 表格控件实现单选功能的文章就介绍到这了,更多相关element table 表格单选内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！