将el-table checkbox 多选改为单选

最新推荐文章于 2024-05-08 11:21:52 发布

m0_60907575

最新推荐文章于 2024-05-08 11:21:52 发布

阅读量336

点赞数

文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/m0_60907575/article/details/133993673

版权

<div class="list-content mt10" v-loading="loading">
          <Table
            v-model="selected"
            ref="table"
            height="580"
            rowKey="id"
            selection
            reserve-selection
            :columns="columns"
            class="table-style"
            :data="tableData"
            @selectChange="selectChange"
            @selectionChange="selectionChange"
          >
            <template slot="domainList" slot-scope="{ item }">
              <div
                v-if="item.domainList !== null && item.domainList.length > 0"
              >
                <ArrayList :list="item.domainList" />
              </div>
            </template>
          </Table>
          <div style="padding-top: 10px">
            <Pagination v-model="page" @change="getList"></Pagination>
          </div>
        </div>
      </el-col>
      <el-col :span="8" style="border-left: 1px #ebeef5 solid">
        <div
          class="selected-info"
          v-html="
            $t('ASSET_COMMON.ASSET_SELECTED_TOOLTIP', { num: selected.length })
          "
        ></div>
        <div class="select-list">
          <el-tag
            class="autoHeight"
            v-for="tag in selected"
            :key="tag.id"
            size="small"
            closable
            @close="tagClose(tag)"
            style="margin-left: 10px; margin-bottom: 5px"
          >
            {{ tag.name }}
          </el-tag>
        </div>
      </el-col>
    </el-row>
    <template slot="footer">
      <el-button size="small" class="drawer-footer-btn" @click="close">{{
        $t('COMMON_LANG.CLOSE')
      }}</el-button>
      <el-button
        type="primary"
        size="small"
        class="drawer-footer-btn"
        @click="submit"
        >{{ $t('COMMON_LANG.CONFIRM_BTN') }}</el-button
      >
    </template>

 async selectChange(selection, row) {
      // 清空
      await this.$refs.table.clearSelection();
      if (selection.length === 0) return;
      this.$refs.table.toggleRowSelectionInfo(row, true);
      this.selected = [];
      this.selected.push(row);
    },
    async selectionChange(selected) {
      if (selected.length > 1) {
        await this.$refs.table.clearSelection();
        const newRows = selected.filter((it, index) => {
          if (index == selected.length - 1) {
            this.$refs.table.toggleRowSelectionInfo(it, true);
            return true;
          } else {
            this.$refs.table.toggleRowSelectionInfo(it, false);
            return false;
          }
        });
        this.selected = newRows;
      } else {
        this.selected = selected;
      }
    },