elementui实现表格单选功能

Posted 穆雄雄

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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;
    ,

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

以上是关于elementui实现表格单选功能的主要内容,如果未能解决你的问题,请参考以下文章

设置ElementUI表格只能单选效果教程

设置ElementUI表格只能单选效果教程

ElementUI el-table 表格 行选择框改为单选

ElementUI前端开发技巧整理笔记

web前端-Vue Element table多选表格实现单选

ElementUI 将table多选框改为单选框的解决办法