element table 表格控件實現單選功能
項目中實現 table 表格控件單選功能,如圖:
基本代碼如下:
1、template 代碼中:
<el-table :data="tableData" border stripe ref="tableData" @row-click="singleElection"> <el-table-column label="" width="65"> <template slot-scope="scope"> <el-radio class="radio" v-model="templateSelection" :label="scope.$index"> </el-radio> </template> </el-table-column> <el-table-column prop="id" label="ID"></el-table-column> <el-table-column prop="title" label="標題"></el-table-column> <el-table-column prop="priority" label="優先級"></el-table-column> <el-table-column prop="state" label="狀態"></el-table-column> <el-table-column prop="dealingPeople" label="處理人"></el-table-column> </el-table>
註意:
<el-radio class="radio" v-model="templateSelection" :label="scope.$index"> </el-radio>
這裡寫   的目的是為瞭頁面不顯示內容,隻顯示單選操作
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 表格單選內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- 關於el-table表格組件中插槽scope.row的使用方式
- vue中的slot-scope及scope.row用法
- 動態實現element ui的el-table某列數據不同樣式的示例
- Element UI中table單元格合並的解決過程
- elementUi 中table表尾插入行的實例