elementui实现表格单选功能

大家好，我是雄雄，欢迎关注微信公众号：雄雄的小课堂

前言

需求是这样的：用户单击购买产品的按钮时，会出现一个产品的列表，但是呢只能买一种产品，暂时不可以多选。效果如下所示：

原来做的是，单击前面的单选按钮，后面的数量表单放开禁用，可以选择和填写；现在需要改成，直接点击某一行，则改行自动选中，当然数量表单也放开可供用户直接输入和填写。

实现方法

框架原来用的是avue写的，这个框架，确实好用，可以提高开发效率，很少的代码实现很多的功能，但这也是个缺点，代码是少了，实现的功能也确实多，不过你要单个实现某个子功能？那可真的是太难为了……

avue也有表格的单选功能，还有例子呢，只是我加上之后没有效果。。。不知道是我代码的问题还是官方已经不支持了，不想在去研究了，直接换成了element ui去实现了。

html代码：

 <div style="margin:-20px 20px 20px 0;line-height: 40px;float: right">
        <span style="font-size: 18px;color:#303133">当前余额：</span>
        <span style="font-size: 18px;color:#F56C6C">￥{{currentBalance}}</span>
      </div>

  <el-table
        ref="cruds"
        :query="query"
        :data="cardData"
        highlight-current-row
        @row-click="cardRowClick"
        @current-change="handleCurrentChange"
      >
          <el-table-column label="选择" width="80">
            <template slot-scope="{ row }">
              <el-radio :label="row.code" v-model="cardForm.code" @change="cardRadionChange(row)"><span></span></el-radio>
            </template>
          </el-table-column>
          <el-table-column label="类型" align="center" prop="typeName" />
          <el-table-column label="名称" align="center" prop="name" />
          <el-table-column label="单价(元)" align="center" prop="price" />
          <el-table-column label="数量" align="center">
                <template slot-scope="{ row }">
                  <el-input-number
                    :disabled="checked != row.code"
                    size="small"
                    v-model="row.num"
                    :value="0"
                    :min="0"
                    @change="cardNumberChange(row)"
                  ></el-input-number>
                </template>
              </el-table-column>
          <el-table-column label="总价" align="center">
              <template slot-scope="{ row }">
                {{ row.num * row.price }}
              </template>
            </el-table-column>

      </el-table>

      <span slot="footer" class="dialog-footer avue-dialog__footer">
        <el-button @click="sailCardDialog = false">取 消</el-button>
        <el-button type="primary" @click="getSailCards" v-loading="buyLoading">
          申 购
        </el-button>
      </span>

data中的变量：

	/*当前用户的余额*/
      currentBalance:0.00,
      cardData: [],
       //单选是否选中
      checked: null,
      /*服务卡的表单*/
      cardForm:{
        cardid:0,
        typeName:'',
        name:'',
        price:'',
        num:1,
        totalPrice:0,
        code:'',
        days:'',
      },

methods中的方法：

	  /*商品列表，行的单击事件*/
    cardRowClick(row){
      this.cardForm.code = row.code;
      this.checked = row.code;
    },

     /*数量的改变事件*/
    cardNumberChange(row){
      this.cardForm.code = row.code;
      this.cardForm.name = row.name;
      this.cardForm.price = row.price;
      this.cardForm.days = row.days;
      this.cardForm.typeName = row.typeName;
      this.cardForm.totalPrice = row.price * row.num;
      this.cardForm.num = row.num;
    },
    /*单选按钮的改变事件*/
    cardRadionChange(row) {
      this.checked = row.code;
    },


    //申请购买的按钮（点击之后验出来商品的列表框）
    getSailCard(row) {
      this.cardForm = {};
      this.checked = null;
      this.payorderList = row;
      this.loadCardList(this.page);
      this.sailCardDialog = true;
      //获取当前用户余额
      getMyBalance().then((res) => {
        this.currentBalance = res.data.balance;
      });
    },

    //去购买的操作
    getSailCards() {

     if (this.cardForm.num == undefined || this.cardForm.num == 0) {
        this.$message({
          message: "请填写购买数量",
          type: "warning",
        });
        return;
      }
     //如果余额不足
     if(this.currentBalance<this.cardForm.totalPrice){
       this.$message({
         message: "当前余额不足，请及时重制~",
         type: "warning",
       });
       //跳转到充值页面
       this.$router.push({
         path: "/capital/invest"
       })
       return;
     }

     this.isPayDialog = true;
    },

   //跳转到充值页面
       this.$router.push({
         path: "/capital/invest"
       })
       return;
     }

     this.isPayDialog = true;
    },

以上就是所有的代码……实现起来也不是很难~