vue?表格單選按鈕的實(shí)現(xiàn)方式

更新時(shí)間：2022年07月28日 08:53:00 作者：巖崎理奈

這篇文章主要介紹了vue?表格單選按鈕的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

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)背景：

問(wèn)題描述

提示：這里描述項(xiàng)目中遇到的問(wèn)題：

點(diǎn)擊是否時(shí)互不影響，然后表格的每一行也互不影響。

原因分析

了解element-ui中的單選按鈕的機(jī)制，是跟否是一組，都是通過(guò)v-model來(lái)進(jìn)行判斷，然后就相當(dāng)于是一個(gè)布爾值（true/false），然后通過(guò)循環(huán)中的每一項(xiàng)后臺(tái)返回的標(biāo)識(shí)符來(lái)判斷選是或者否。

解決方案

             <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è)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: