el-table实现单选

需求：

企业分类（1）选择企业分类，打开弹窗，自动勾选已经选择的企业分类。高亮显示

              （2）弹窗选择某个企业分类，点击确定，下拉框的企业分类变更。取消不变更。

 dom :

弹出框用el-popover , 难点在于单选按钮，el-table实现如下：

        
            
              
            
            

              
                
                  
                

                
                

              
              

                取 消
                确 定
              
              
            
          

核心代码：

data定义：

data(){
return{
    currentRow: null,
      visible: false,
      radioIdSelect: '',
         gridData: [{
        id: 'A',
        className: '民营企业',
        classDes: '我国民营企业界定从广义上看，民营只与国有独资企业相对，而与任何非国有独资企业是相容的，包括国有持股和控股企业。因此，归纳民营企业的概念就是：非国有独资企业均为民营企业。从狭义的角度来看，“民营企业”仅指私营企业和以私营企业为主体的联营企业。'
      },
      {
        id: 'B',
        className: '政府机构',
        classDes: '在广义上指中央和地方的全部立法、行政、司法和官僚机关。狭义的政府机构仅指中央和地方的行政机关、官僚机关，即依照国家法律设立并享有行政权力、担负行政管理职能的部分国家机构。'
      },
      {
        id: 'C',
        className: '外资企业',
        classDes: '泛指依照我国有关法律规定，在我国境内设立的由外国投资者独自投资经营的企业。'
      },

      {
        id: 'D',
        className: '境外企业',
        classDes: '是指依照外国(地区)法律成立且实际管理机构不在中国境内，但在中国境内设立机构、场所的，或者在中国境内未设立机构、场所，但有来源于中国境内所得的企业。'
      },

      {
        id: 'E',
        className: '国有企业及国有控股企业',
        classDes: '1) 国有企业是指企业全部资产归国家所有，并按规定登记注册的非公司制的经济组织。不包括有限责任公司中的国有独资公司。\n2) 国有控股企业是指在企业的全部资本中，国家资本股本占较高比例，并且由国家实际控制的企业。包括绝对控股企业和相对控股企业。国有绝对控股企业是指国家资本比例大于50%(含50%)的企业，包含未经改制的国有企业。国有相对控股企业是指国家资本比例不足50%，但相对高于企业中的其他经济成分所占比例的企业(相对控股)，或者虽不大于其他经济成份，但根据协议规定，由国家拥有实际控制权的企业(协议控制)。对于企业由三方合资，其中两家为国有企业，国家资本之和超过50%的，在填报"国有经济控股"时，国家资本不能按两家之和来计算，而应按企业的实际控股或控制情况来填报。'
      }

      ],
}
}

method方法：

showCustomerGroup() {
      this.customerGroupChange()
    },
    setCurrent(row) {
      console.log('dangqian', row)
      this.$refs.singleTable.setCurrentRow(row)
    },
    handleCurrentChange(val) {
      this.currentRow = val
    },
    // 确定选择企业分类
    confirmSelet() {
      // console.log('确定', this.radioIdSelect)
      this.formEnterpriseInfo.customerGroup = this.radioIdSelect
      this.visible = false
    },
    // 单选框
    handleSelectionChange(index, row) {
      // console.log(' 单选', index, row)
    },
    // 企业分类下拉选择变化
    customerGroupChange() {
      this.radioIdSelect = this.formEnterpriseInfo.customerGroup
      this.gridData.forEach((item) => {
        if (item.id === this.radioIdSelect) {
          console.log(item)
          this.setCurrent(item)
        }
      })
    },
    rowClick(row) {
      this.radioIdSelect = row.id
    },

---

---

---

---

抽取成组件的形式：

customerGroup

父组件使用：

data:

customerVisible: false,

methods

 // 确定选择分类
    confirmClick(val) {
      if (val.length !== 0) {
        const param = {
          baseCustomerId: this.baseCustomerId,
          customerGroup: val
        }
        saveCustomerGroup2(param).then((res) => {
          if (res.success) {
            // this.customerVisible = false
          }
        })
        saveCustomerGroup(param).then((res) => {
          if (res.success) {
            this.customerVisible = false
          }
        })
      }
    },