用element ui怎么控制下列表格单选框，只能单选一个？

  • Z时代
  • 2024-02-05
  • 分类：IT

如图，怎么实现单选，且可以获取到对应的前两行的值。
用element ui怎么控制下列表格单选框，只能单选一个？
自己实现大概就是以下代码，但是不好控制单选，也不好获取值

<el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="title" label="气导" />
        <el-table-column prop="icon_1" label="未掩蔽">
          <template slot-scope="{ row,column,$index }">
            <el-image :src="row.icon_1" class="icon" v-if="$index != 2"></el-image>
            <el-checkbox :checked="row.icon_1" v-if="$index == 2" @change="changeBox(row, column, $index)"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="掩蔽">
          <template slot-scope="{ row,$index }">
            <el-image :src="row.icon_2" class="icon" v-if="$index != 2"></el-image>
            <el-checkbox :checked="row.icon_2" v-if="$index == 2" @change="changeBox(row, column, $index)"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="无反应未掩蔽">
          <template slot-scope="{ row,$index }">
            <el-image :src="row.icon_3" class="icon" v-if="$index != 2"></el-image>
            <el-checkbox :checked="row.icon_3" v-if="$index == 2" @change="changeBox(row, column, $index)"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="无反应掩蔽">
          <template slot-scope="{ row ,$index}">
            <el-image :src="row.icon_4" class="icon" v-if="$index != 2"></el-image>
            <el-checkbox :checked="row.icon_4" v-if="$index == 2" @change="changeBox(row, column, $index)"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="骨导"> </el-table-column>
        <el-table-column prop="icon_1" label="未掩蔽">
          <template slot-scope="{ row,$index }">
            <el-image :src="row.icon_5" class="icon" v-if="$index != 2"></el-image>
            <el-checkbox :checked="row.icon_5" v-if="$index == 2" @change="changeBox(row, column, $index)"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="掩蔽">
          <template slot-scope="{ row,$index}">
            <el-image :src="row.icon_6" class="icon" v-if="$index != 2"></el-image>
            <el-checkbox :checked="row.icon_6" v-if="$index == 2" @change="changeBox(row, column, $index)"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="无反应未掩蔽">
          <template slot-scope="{ row,$index }">
            <el-image :src="row.icon_7" class="icon" v-if="$index != 2"></el-image>
            <el-checkbox :checked="row.icon_7" v-if="$index == 2" @change="changeBox(row, column, $index)"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="无反应掩蔽">
          <template slot-scope="{ row,$index }">
            <el-image :src="row.icon_8" class="icon" v-if="$index != 2"></el-image>
            <el-checkbox :checked="row.icon_8" v-if="$index == 2" @change="changeBox(row, column, $index)"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="助听听阈">
          <template slot-scope="{ row,$index }">
            <el-image :src="row.icon_9" class="icon" v-if="$index != 2"></el-image>
            <el-checkbox :checked="row.icon_9" v-if="$index == 2" @change="changeBox(row, column, $index)"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="无反应助听">
          <template slot-scope="{ row,$index }">
            <el-image :src="row.icon_10" class="icon" v-if="$index != 2"></el-image>
            <el-checkbox :checked="row.icon_10" v-if="$index == 2" @change="changeBox(row, column, $index)"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="声场">
          <template slot-scope="{ row,$index }">
            <el-image :src="row.icon_11" class="icon" v-if="$index != 2"></el-image>
            <el-checkbox :checked="row.icon_11" v-if="$index == 2" @change="changeBox(row, column, $index)"></el-checkbox>
          </template>
        </el-table-column>
      </el-table>

这是表格代码html部分

tableData: [
        {
          title: '左耳', icon_1: IconAssets.resIcon(0), icon_2: IconAssets.resIcon(2), icon_3: IconAssets.resIcon(4),
          icon_4: IconAssets.resIcon(6), icon_5: IconAssets.resIcon(8), icon_6: IconAssets.resIcon(10), icon_7: IconAssets.resIcon(12),
          icon_8: IconAssets.resIcon(14), icon_9: IconAssets.resIcon(16), icon_10: IconAssets.resIcon(18), icon_11: IconAssets.resIcon(1),
        },
        {
          title: '右耳', icon_1: IconAssets.resIcon(1), icon_2: IconAssets.resIcon(3), icon_3: IconAssets.resIcon(5),
          icon_4: IconAssets.resIcon(7), icon_5: IconAssets.resIcon(9), icon_6: IconAssets.resIcon(11), icon_7: IconAssets.resIcon(13),
          icon_8: IconAssets.resIcon(15), icon_9: IconAssets.resIcon(17), icon_10: IconAssets.resIcon(19), icon_11: IconAssets.resIcon(1)
        },
        { icon_1: true, icon_2: false, icon_3: false, icon_4: false, icon_5: false, icon_6: false, icon_7: false, icon_8: false, icon_9: false, icon_10: false, icon_11: false }
      ],

js数据

回答：

el-checkbox 就不对啊，你单选不应该是 el-radio 嘛？

当然checkbox 也行，你需要把选中的 key 存起来，也就是 prop="icon_1"，checked 的时候之类判断是否等于 key 即可

以上是 用element ui怎么控制下列表格单选框，只能单选一个？ 的全部内容， 来源链接： utcz.com/p/934937.html

回到顶部