vue?表格單選按鈕的實(shí)現(xiàn)方式
vue實(shí)現(xiàn)表格單選按鈕
return{ orderNo:'', columns: [ { title:'', key: '', render:(h,params) => { let orderNo = params.row.orderNo; let orderNoShow = true; if(this.orderNo == orderNo){ orderNoShow = true; } else { orderNoShow = false } let self = this; return h('radio',{ props:{ label: '', value: orderNoShow }, on:{ 'on-change': ()=>{ self.orderNo = orderNo } } }) } } ] }
表格中有兩個(gè)單選按鈕切換互不影響
項(xiàng)目場(chǎng)景
提示:這里簡(jiǎn)述項(xiàng)目相關(guān)背景:
問題描述
提示:這里描述項(xiàng)目中遇到的問題:
點(diǎn)擊是否時(shí)互不影響,然后表格的每一行也互不影響。
原因分析
了解element-ui中的單選按鈕的機(jī)制,是跟否是一組,都是通過v-model來進(jìn)行判斷,然后就相當(dāng)于是一個(gè)布爾值(true/false),然后通過循環(huán)中的每一項(xiàng)后臺(tái)返回的標(biāo)識(shí)符來判斷選是或者否。
解決方案
<el-table :data="tableData" border style="width: 100%"> <el-table-column prop="shyqrdbxm" label="姓名" width="180" align="center" > </el-table-column> <el-table-column prop="shyqrdbzjhm" label="證件號(hào)碼" width="180" align="center" > </el-table-column> <el-table-column prop="xb" label="性別" width="180" align="center" > <template slot-scope="scope"> <span v-if="scope.row.xb == 1">男</span> <span v-else>女</span> </template> </el-table-column> <el-table-column prop="dh" label="電話" width="180" align="center" > </el-table-column> <el-table-column prop="poverty" label="是否脫貧戶" width="180" align="center" > //主要解決方案在這里 <template slot-scope="scope"> <div class="choose"> <el-radio v-model="scope.row.poverty" :label="1" >是</el-radio > <el-radio v-model="scope.row.poverty" :label="0" >否</el-radio > </div> </template> </el-table-column> <el-table-column prop="poverty" label="" width="180" align="center" > <template slot-scope="scope"> <span v-if="scope.row.poverty == 1" style="color: #08d3ff; cursor: pointer" @click="handClickDetail(scope.row)" >脫貧戶信息表</span > <span v-if="scope.row.poverty == 0" style="color: #fff" >脫貧戶信息表</span > </template> </el-table-column> </el-table>
數(shù)據(jù)結(jié)構(gòu):
? ? ? ?tableData:[{ ? ? ? ? ? ? ?shyqrdbxm:'張三', ? ? ? ? ? ? ?shyqrdbzjhm:'32432543534565', ? ? ? ? ? ? ?xb:'男', ? ? ? ? ? ? ?dh:'13841037895', ? ? ? ? ? ? ?poverty:1 //是 ? ? ? ? ?}, ? ? ? ? ?{ ? ? ? ? ? ? ?shyqrdbxm:'張三', ? ? ? ? ? ? ?shyqrdbzjhm:'32432543534565', ? ? ? ? ? ? ?xb:'男', ? ? ? ? ? ? ?dh:'13841037895', ? ? ? ? ? ? ?poverty:0 //否 ? ? ? ? ?} ? ? ? ?]
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue?文件切片上傳的項(xiàng)目實(shí)現(xiàn)
本文主要介紹了vue?文件切片上傳的項(xiàng)目實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03前端低代碼form-generator實(shí)現(xiàn)及新增自定義組件詳解
這篇文章主要給大家介紹了關(guān)于前端低代碼form-generator實(shí)現(xiàn)及新增自定義組件的相關(guān)資料,form-generator是一個(gè)開源的表單生成器,可以幫助我們快速構(gòu)建各種表單頁(yè)面,需要的朋友可以參考下2023-11-11vue+layui實(shí)現(xiàn)select動(dòng)態(tài)加載后臺(tái)數(shù)據(jù)的例子
今天小編就為大家分享一篇vue+layui實(shí)現(xiàn)select動(dòng)態(tài)加載后臺(tái)數(shù)據(jù)的例子,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09vue項(xiàng)目實(shí)現(xiàn)點(diǎn)擊目標(biāo)區(qū)域之外可關(guān)閉(隱藏)目標(biāo)區(qū)域
這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)點(diǎn)擊目標(biāo)區(qū)域之外可關(guān)閉(隱藏)目標(biāo)區(qū)域,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-03-03使用vue.js2.0 + ElementUI開發(fā)后臺(tái)管理系統(tǒng)詳細(xì)教程(一)
這篇文章主要介紹了使用vue.js2.0 + ElementUI開發(fā)后臺(tái)管理系統(tǒng)詳細(xì)教程(一)的相關(guān)資料,需要的朋友可以參考下2017-01-01vue?當(dāng)中組件之間共享數(shù)據(jù)的實(shí)現(xiàn)方式
這篇文章主要介紹了vue?當(dāng)中組件之間共享數(shù)據(jù)的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10Vue中Vue-Baidu-Map基本使用方法實(shí)例
最近有一個(gè)項(xiàng)目需要用到地圖來展示位置并進(jìn)行數(shù)據(jù)交互,用vue-baidu-map實(shí)現(xiàn)出來,下面這篇文章主要給大家介紹了關(guān)于Vue中Vue-Baidu-Map基本使用的相關(guān)資料,需要的朋友可以參考下2023-03-03