element?table?表格控件實現(xiàn)單選功能
更新時間：2022年07月22日 15:45:27 作者：厲害的辛巴
本文主要介紹了element?table?表格控件實現(xiàn)單選功能，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
項目中實現(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="標(biāo)題"></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;
},到此這篇關(guān)于element table 表格控件實現(xiàn)單選功能的文章就介紹到這了,更多相關(guān)element table 表格單選內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細介紹了Vue.js實現(xiàn)備忘錄功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-06-06
Vue如何將當(dāng)前窗口截圖并將數(shù)據(jù)base64轉(zhuǎn)為png格式傳給服務(wù)器
這篇文章主要介紹了Vue如何將當(dāng)前窗口截圖并將數(shù)據(jù)base64轉(zhuǎn)為png格式傳給服務(wù)器,通過實例代碼介紹了將當(dāng)前窗口截圖,并將數(shù)據(jù)存儲下來,需要的朋友可以參考下2023-10-10
Nuxt.js是創(chuàng)建Universal Vue.js應(yīng)用程序的框架。它的主要范圍是UI渲染，同時抽象出客戶端/服務(wù)器分布。我們的目標(biāo)是創(chuàng)建一個足夠靈活的框架，以便您可以將其用作主項目庫或基于Node.js的當(dāng)前項目。2020-03-03
vue-calendar-component 封裝多日期選擇組件的實例代碼
這篇文章主要介紹了vue-calendar-component 封裝多日期選擇組件,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-12-12
很多Vue項目中都需要PDF文件預(yù)覽功能,比如合同ERP,銷售CRM,內(nèi)部文檔CMS管理系統(tǒng),內(nèi)置PDF文件在線預(yù)覽功能,下面這篇文章主要給大家介紹了關(guān)于如何在vue中實現(xiàn)文件預(yù)覽功能的相關(guān)資料,需要的朋友可以參考下2022-10-10
Vue2.0利用vue-resource上傳文件到七牛的實例代碼
本篇文章主要介紹了Vue2.0利用vue-resource上傳文件到七牛的實例代碼，具有一定的參考價值，有興趣的可以了解一下2017-07-07
VueX 提供了一個全局都可以使用的數(shù)據(jù)管理倉庫，不用考慮父子傳值之類的問題，并且可以跨頁面?zhèn)鬟f數(shù)據(jù)，提高了可維護性，這篇文章主要介紹了Vue3 中的 Vue-Router 和 VueX,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了在vue中動態(tài)修改css其中一個屬性值操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-12-12
本文主要介紹了Vue實現(xiàn)插槽下渲染dom字符串的使用，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
vue.js 實現(xiàn)點擊按鈕動態(tài)添加li的方法
今天小編就為大家分享一篇vue.js 實現(xiàn)點擊按鈕動態(tài)添加li的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09