elementplus table排序和取得该条数据

最新推荐文章于 2026-05-04 09:21:47 发布

原创最新推荐文章于 2026-05-04 09:21:47 发布 · 1.9k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #vue.js #ecmascript

element-plus 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何在 Element UI 的 el-table 组件中实现排序功能及数据操作，包括设置默认排序规则、获取指定行数据并进行编辑或删除等常见操作。

排序

在需要排序的字段加上sortable 即可。
可在el-table使用:default-sort设置默认排序规则。

取得该条数据

在按钮所在容器加上#default=“空间名”，
按钮本身加上@click=“update(scopexx.$index, scopexx.row)”，
methods里update(index, row){}即可使用。
$index是当前排序下该行数据在数据list里的索引， row是该行数据

<template>
  <div class="wrapper">
    <el-table
      :data="tableData"
      stripe
      border
      :default-sort="{ prop: 'name', order: 'descending' }"
      style="width: 100%"
      height="250"
    >
      <el-table-column type="selection" sortable width="55" />
      <el-table-column fixed prop="id" label="商品id" width="100" />
      <el-table-column
        prop="name"
        sortable
        label="名字"
        show-overflow-tooltip
      />
      <el-table-column #default="scopexx" fixed="right" label="操作" width="200">
        <el-button type="warning" @click="update(scopexx.$index, scopexx.row)"
          >编辑</el-button
        >
        <el-button type="danger" @click="del(scopexx.$index, scopexx.row)"
          >删除</el-button
        ></el-table-column
      >
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      input: "",
      dialogFormVisible: false,
      vCount: 0,
      currentPage: 1,
    };
  },
  methods: {
    update(index, row) {
      console.log(index);
      console.log(row);
      this.setDialogFormVisible2(true);
      this.$api.selectOneGood({ id: row.id }).then((res) => {
        const data = res.data.data[0];
        data.checkList = [];
        data.checkedIds = [1, 8, 6];
        this.$refs.dialog2.goodsForm = data;
      });
    },
    del(index, row) {
      this.$confirm({
        title: "确认删除吗？",
        okText: "是",
        cancelText: "否",
        icon: "exclamation-circle",
      })
        .then(() => {
          this.$api.delGood({ id: row.id }).then((res) => {
            this.$message({ message: "删除成功", type: "info" });
            this.search1();
          });
        })
        .catch(() => {
          this.$message({ message: "取消删除", type: "error" });
        });
    },
  },
};
</script>