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