element-ui实现表格单选的功能

Posted 2022-04-29 穆雄雄

“

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

”

前言

现在是：2022年4月20日13:33:23

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

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

实现方法

框架原来用的是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;
    ,

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