Vue 项目经验总结（一）：element ui 表格实现单选功能

一、先来看下大体的效果图（单选）：

未选中状态.jpg

选中状态.jpg

二、代码：

template:

            <p class="title">产品</p>
            <template>
              <el-table :data="policyResults" stripe style="width: 100%" @current-change="toggerCheckBoxListHandle">
                <el-table-column prop="addProductName" label="产品名称" >
                  <template slot-scope="scope">
                    <span>{{scope.row.addProductName}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="addProductPrice" label="单价">
                  <template slot-scope="scope">
                    <span>{{scope.row.addProductPrice | numFilter}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="" label="总价">
                  <template slot-scope="scope">
                    {{scope.row.addProductPrice*(adultNum+childrenNum) | numFilter}}
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="55">
                  <template slot-scope="scope">
                    <el-checkbox @change="changeCheckedHandle(scope.row)" v-model='scope.row.checked'></el-checkbox> 
                  </template>
                </el-table-column>
              </el-table>
            </template>

script:

data () {
  return {
    adultNum:2,
    childrenNum:1,
    policyResults:[
      {
        "addProductId":"dfsd2343-343-fe2-fcxc",
        "addProductName":"产品1",
        "addProductPrice":7.0,
        "checked":false,
      },
      {
        "addProductId":"ferer23-343-fe2-fcxc",
        "addProductName":"产品2",
        "addProductPrice":17.8,
        "checked":false,
      },
      {
        "addProductId":"vrtrtrtg-533-432-f434",
        "addProductName":"产品3",
        "addProductPrice":15.0,
        "checked":false,
      },
    ]
  }
},
methods:{
    // 表格行点击事件
    toggerCheckBoxListHandle (row) {
        this.policyResults.forEach(item => {
          // 排他,每次选择时把其他选项都清除
          if (item.addProductId != row.addProductId) {
            item.checked = false
          } else {
            item.checked = true;
            //深度赋值
            var _obj = JSON.stringify(item);
            this.insuranceInfo = JSON.parse(_obj);
            this.fillOrderParams.orderAddProducts = JSON.parse(_obj);
            this.fillOrderParams.orderAddProducts.id = this.fillOrderParams.orderAddProducts.addProductId;
            this.fillOrderParams.orderAddProducts.checked = true;
          }
        })
        console.log(row)
    },
    // 切换多选框
    changeCheckedHandle(item){
      if(!item.checked){
        this.insuranceInfo.addProductId='';
        this.insuranceInfo.addProductName='';
        this.insuranceInfo.addProductPrice=0;
        this.insuranceInfo.addProductType='';
        this.insuranceInfo.brandLogo='';
        this.insuranceInfo.supplierName='';
      }else{
        var _obj = JSON.stringify(item);
        this.insuranceInfo = JSON.parse(_obj);
      }
    }
}

~~ 欢迎留言指教 ^_