Vue3 Element Plus el-table实现单选操作

23 min read
 <ElTable
      ref="TableRef"
      :columns="columns"
      :data="tableData"
      :row-key="(row) => { return row.id }"
      max-height="600px"
      style="width: 100%;"
      @selection-change="handleSelectionChange"
    >
      <el-table-column label="选择" align="center" width="65">
        <template #default="scope">
          <el-radio :label="scope.$index" v-model="radio"
                    @change.native="getCurrentRow(scope.row)"></el-radio>
        </template>
      </el-table-column>
      <el-table-column label="姓名" prop="realName" />
      <el-table-column align="right">
        <template #header>
          <div class="flex">
            <el-input v-model="search" class="mr-3" clearable placeholder="搜索人员" size="small" />
            <XButton icon="query" @click="handlePersonSearchByName" />
          </div>
        </template>
      </el-table-column>
    </ElTable>