el-radio遇到的一些坑

低調的D吖

于 2020-04-13 17:20:33 发布

阅读量759

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.csdn.net/software20121216/article/details/105492950

博客内容涉及在使用Element UI的el-radio组件时遇到的问题及解决方案。当radio选项数据来源于上一层table展开时，选择其中一个选项会导致其他展开的数据也被选中。通过根据父级table的索引来处理子级radio的选择，解决了问题1。对于问题2，即如何处理多个数据的radio选择，作者发现移除choice[props.$index].radio中的radio属性即可避免问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

radio下面的數據是上一層的table 展開的

問題1:選擇了其中一個，其他expand的數據都會被選中

思路：根據父級table然後選擇了子級radio

 <el-table fit style="width: 100%;" :data="goodsData" :row-key="getRowKeys" :expand-row-keys="expands" border @current-change="toggleRowExpansion">
      <el-table-column type="expand" :label="$t('commonText.switch')" width="80px">
        <template slot-scope="props">
          <el-table label-position="left" :data="suppliersData" border fit>
            <el-table-column :label="$t('pageInquiryView.choice')" align="center" min-width="80">
              <template slot-scope="scope">
                <el-radio-group v-model="choice[props.$index].radio" @change="handleChange(props)">
                  <el-radio :label="scope.$index">
                    <!--  {