快捷導(dǎo)航

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

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

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

vue實現(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 
                  }
                }
            })
           }
         }
        ]
}

表格中有兩個單選按鈕切換互不影響

項目場景

提示：這里簡述項目相關(guān)背景：

問題描述

提示：這里描述項目中遇到的問題：

點擊是否時互不影響，然后表格的每一行也互不影響。

原因分析

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

解決方案

             <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="證件號碼"
                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 //否
? ? ? ? ?}
? ? ? ?]

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: