element plus table组件多选获取数据id

首先给table加上 @selection-change="handleSelectionChange"事件

示例

html 复制代码
<el-table @selection-change="handleSelectionChange" stripe
        :data="data?.slice((currentPage3 - 1) * pageSize3, currentPage3 * pageSize3)" style="width: 100%">
        <!-- 复选框 -->
        <el-table-column fixed type="selection" width="40" align="center" />
        <el-table-column prop="id" label="序号" width="60" align="center" />
        <el-table-column prop="name" label="店铺名称" align="center" />
        <el-table-column prop="storetypename" width="110" label="店铺分类" align="center" />
        <el-table-column prop="img" label="店铺图片" align="center">
          <template #default="scope">
            <el-image preview-teleported="true" style="width: 40px; height: 40px;" :src="url + scope.row.img"
              :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :preview-src-list="[url + scope.row.img]"
              fit="cover" /></template>
        </el-table-column>
        <el-table-column label="认证" align="center">
          <template #default="scope">
            <el-button size="small" v-if="scope.row.type == 3 ? true : false" type="success" plain>通过</el-button>
            <el-button size="small" v-if="scope.row.type == 2 ? true : false" type="danger" plain>驳回</el-button>
            <el-button size="small" v-if="scope.row.type == 1 ? true : false" type="danger" plain>待认证</el-button>
          </template>
        </el-table-column>
        <el-table-column label="服务类型" show-overflow-tooltip align="center">
          <template #default="scope">
            <el-button size="small" type="primary" plain>{{ scope.row.busin }}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="上下架" align="center">
          <template #default="scope">
            <el-switch @click="upelseload(scope.row)" :model-value="scope.row.status" :active-value="2"
              :inactive-value="1" />
          </template>
        </el-table-column>

        <el-table-column prop="name" label="操作" width="200" align="center">
          <template #default="scope">
            <el-button @click="sounnc(scope.row)" size="small" type="warning" plain>审核</el-button>
            <el-button @click="serve(scope.row)" size="small" type="primary" plain>服务</el-button>
            <el-button @click="open(scope.row)" size="small" type="danger" plain>删除</el-button>
          </template>
        </el-table-column>

      </el-table>

然后写上

javascript 复制代码
// 多选
const data_id = ref([]);
const multipleSelection = ref([]);
//复选框事件
const handleSelectionChange = val => {
  multipleSelection.value = val;
  // 重置
  data_id.value = [];
  multipleSelection.value.filter(item => {
    data_id.value.push(item.id);
  });
  console.log(data_id.value);
};

这个打印的console.log(data_id.value);就是我们要的列表id

相关推荐
FuckPatience42 分钟前
Vue ASP.Net Core WebApi 前后端传参
前端·javascript·vue.js
一枚前端小能手1 小时前
🔥 SSR服务端渲染实战技巧 - 从零到一构建高性能全栈应用
前端·javascript
Komorebi_99991 小时前
Vue3 provide/inject 详细组件关系说明
前端·javascript·vue.js
不一样的少年_1 小时前
【前端效率工具】:告别右键另存,不到 50 行代码一键批量下载网页图片
前端·javascript·浏览器
Asort1 小时前
JavaScript设计模式(八):组合模式(Composite)——构建灵活可扩展的树形对象结构
前端·javascript·设计模式
木觞清2 小时前
喜马拉雅音频链接逆向实战
开发语言·前端·javascript
一枚前端小能手2 小时前
「周更第6期」实用JS库推荐:InversifyJS
前端·javascript
叉歪2 小时前
纯前端函数,一个拖拽移动、调整大小、旋转、缩放的工具库
javascript
Hilaku2 小时前
"事件委托"这个老古董,在现代React/Vue里还有用武之地吗?
前端·javascript·vue.js
向葭奔赴♡2 小时前
前端框架学习指南:提升开发效率
前端·javascript·vue.js