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

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

未选中状态.jpg

选中状态.jpg

---

二、代码：

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);
      }
    }
}

~~ 欢迎留言指教 ^_