Vue Element-UI中el-table實(shí)現(xiàn)單選的示例代碼
更新時(shí)間：2023年12月15日 09:04:04 作者：夢(mèng)之歸途
在element-ui中是為我們準(zhǔn)備好了可直接使用的單選與多選屬性的,本文主要介紹了Vue Element-UI中el-table實(shí)現(xiàn)單選的示例代碼,具有一定的參考價(jià)值,感興趣的可以了解一下
實(shí)現(xiàn)方式: 給el-table-column設(shè)置el-radio
<div class="default-page">
<el-table :data="accountList" v-loading="loading" highlight-current-row @current-change="handleCurrent" border height="250px">
<el-table-column width="60px">
<template v-slot="scope">
<!-- label值要與el-table數(shù)據(jù)id實(shí)現(xiàn)綁定 -->
<el-radio v-model="unitInfo.userId" :label="scope.row.userId" @change="handleRowChange(scope.row)">{{""}}</el-radio>
</template>
</el-table-column>
<el-table-column type="index" label="序號(hào)" />
<el-table-column prop="userId" label="賬號(hào)編號(hào)" />
<el-table-column prop="username" label="賬號(hào)名稱" />
<el-table-column prop='status' label="賬號(hào)狀態(tài)">
<template slot-scope="scope">
<el-tag :type="scope.row.status | filters('availableType')">{{ scope.row.status | filters('availableValue')}}</el-tag>
</template>
</el-table-column>
</el-table>
</div>export default {
data() {
return {
}
},
methods: {
// 方法一:與el-table @current-change方法 綁定
handleCurrent (val) {
if (val) {
this.unitInfo.userId = val.userId
this.unitInfo.man = val.username
}
},
// 方法二:與el-radio @change方法 綁定
handleRowChange (data) {
if (data) {
this.unitInfo.userId = data.userId
this.unitInfo.man = data.username
}
}
}
}到此這篇關(guān)于Vue Element-UI中el-table實(shí)現(xiàn)單選的示例代碼的文章就介紹到這了,更多相關(guān)Element el-table單選內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
今天小編就為大家分享一篇Vue點(diǎn)擊切換顏色的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue-cli 作為 Vue 官方推薦的項(xiàng)目構(gòu)建腳手架，它提供了開(kāi)發(fā)過(guò)程中常用的，熱重載，構(gòu)建，調(diào)試，單元測(cè)試，代碼檢測(cè)等功能。我們本次的異步遠(yuǎn)端組件將基于 vue-cli 開(kāi)發(fā)2017-11-11
element上傳組件循環(huán)引用及簡(jiǎn)單時(shí)間倒計(jì)時(shí)的實(shí)現(xiàn)
這篇文章主要介紹了element上傳組件循環(huán)引用及簡(jiǎn)單時(shí)間倒計(jì)時(shí)的實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
vue ajax 攔截原理與實(shí)現(xiàn)方法示例
這篇文章主要介紹了vue ajax 攔截原理與實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了vue.js基于ajax攔截實(shí)現(xiàn)無(wú)刷新登錄的相關(guān)原理與操作技巧,需要的朋友可以參考下2019-11-11
詳解vue2.0+axios+mock+axios-mock+adapter實(shí)現(xiàn)登陸
這篇文章主要介紹了詳解vue2.0+axios+mock+axios-mock+adapter實(shí)現(xiàn)登陸，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
這篇文章主要介紹了怎樣在vue項(xiàng)目下添加ESLint的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05
這篇文章主要介紹了Vue中如何使用base64編碼和解碼問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
十個(gè)有用的自定義Vue鉤子函數(shù)總結(jié)
這篇文章主要為大家介紹了十個(gè)Vue.js中有用的自定義鉤子，讓我們的代碼更加好看。文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下2022-04-04
在日常業(yè)務(wù)開(kāi)發(fā)中我們會(huì)經(jīng)常封裝一些業(yè)務(wù)組件,下面這篇文章主要給大家介紹了關(guān)于Vue組件的實(shí)現(xiàn)原理,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
Vue高級(jí)組件之函數(shù)式組件的使用場(chǎng)景與源碼分析
Vue提供了一種稱為函數(shù)式組件的組件類型,用來(lái)定義那些沒(méi)有響應(yīng)數(shù)據(jù),也不需要有任何生命周期的場(chǎng)景,它只接受一些props來(lái)顯示組件,下面這篇文章主要給大家介紹了關(guān)于Vue高級(jí)組件之函數(shù)式組件的使用場(chǎng)景與源碼分析的相關(guān)資料,需要的朋友可以參考下2021-11-11