element?table?表格控件實現(xiàn)單選功能
更新時間：2022年07月22日 15:45:27 作者：厲害的辛巴
本文主要介紹了element?table?表格控件實現(xiàn)單選功能，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
項目中實現(xiàn) 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="優(yōu)先級"></el-table-column>
<el-table-column prop="state" label="狀態(tài)"></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>
這里寫   的目的是為了頁面不顯示內(nèi)容，只顯示單選操作
2、data 代碼中：
data() {
return {
templateSelection: '',
// 返回數(shù)據(jù)
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 表格控件實現(xiàn)單選功能的文章就介紹到這了,更多相關element table 表格單選內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
在vue中，并不是任何時候數(shù)據(jù)都是雙向綁定的，解決數(shù)據(jù)沒有被雙向綁定我們可以使用?vm.$set?實例方法，該方法是全局方法?Vue.set?的一個別名，這篇文章主要介紹了vue中$set用法詳細講解,需要的朋友可以參考下2022-12-12
Vue單頁式應用(Hash模式下)實現(xiàn)微信分享的實例
本篇文章介紹了Vue單頁式應用(Hash模式下)實現(xiàn)微信分享的實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
vue如何使用 Slot 分發(fā)內(nèi)容實例詳解
本篇文章主要介紹了vue如何使用 Slot 分發(fā)內(nèi)容實例詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了Ant Design Pro 之 ProTable使用操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了淺談VUE中演示v-for為什么要加key，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-01-01
vue實現(xiàn)圖片路徑轉二進制文件流(binary)
這篇文章主要介紹了vue實現(xiàn)圖片路徑轉二進制文件流(binary)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
vue項目打包后提交到git上為什么沒有dist這個文件的解決方法
這篇文章主要介紹了vue項目打包后提交到git上為什么沒有dist這個文件的解決方法,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-09-09
這篇文章主要為大家詳細介紹了vue實現(xiàn)登錄頁背景粒子特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
我們在開發(fā)過程中經(jīng)常需要監(jiān)聽用戶的輸入,比如用戶的點擊事件、拖拽事件、鍵盤事件等等,這篇文章主要給大家介紹了關于Vue監(jiān)聽鍵盤事件實用示例的相關資料,需要的朋友可以參考下2023-11-11
Vue淺析axios二次封裝與節(jié)流及防抖的實現(xiàn)
axios是基于promise的HTTP庫，可以使用在瀏覽器和node.js中，它不是vue的第三方插件，vue-axios是axios集成到Vue.js的小包裝器，可以像插件一樣安裝使用:Vue.use(VueAxios,?axios)，本文給大家介紹axios的二次封裝和節(jié)流與防抖2022-08-08