vue爬坑记:element-ui的table中单选按钮的设置-优快云博客

本文记录了在Vue项目中使用Element-UI组件库时，如何在Table组件内实现单选按钮的设置和交互，探讨了可能遇到的问题及解决方案。

<el-table-column align="center" label="主经营品牌">
              <template slot-scope="scope">
                <!-- class="textRadio" -->
                <el-radio @change.native="getCurrentRow(scope.$index)" :label="scope.$index" v-model="radio" class="textRadio">&nbsp;</el-radio>

              </template>
            </el-table-column>

export default {
  data() {
    return {
      radio: 1,
    }
  }
}

shopProxyBrandInfo: [
        {
          brandName_cn: "品牌中文名",
          brandName_en: "pinpaiyingwenming",
          brand: "品琦",
          brandLogo: "logo",
          describe: "描述信息",
          agent: "代理商",
          mainManageBrand: 0,
          index: 0
        },
        {
          brandName_cn: "品牌中文名",
          brandName_en: "pinpaiyingwenming",
          brand: "品琦",
          brandLogo: "logo",
          describe: "描述信息",
          agent: "代理商",
          mainManageBrand: 0,
          index: 1
        }
      ],

 methods: {
//门店代理品牌信息
    showRow(row) {
      //赋值给radio

      this.radio = this.shopProxyBrandInfo.indexOf(row);
      console.log('this.radio',this.radio);
      this.shopProxyBrandInfo[this.radio].mainManageBrand = 1;
      console.log("this.shopProxyBrandInfo", this.shopProxyBrandInfo);
    },

}