vue封装element-ui的表格

# Table.vue

src/components/Tabel.vue

<template>
  <div>
    <div class="mb-3" v-if="showAdd">
      <el-button type="success" size="medium" @click="handleAdd">
        点击添加
      </el-button>
    </div>
    <el-table
      ref="table"
      :data="data"
      border
      stripe
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column v-if="selection" type="selection" width="55">
      </el-table-column>
      <el-table-column
        :prop="item.key"
        :label="item.title"
        :width="item.width"
        v-for="item in columns"
        :key="item.key"
        align="center"
      >
        <template slot-scope="scope">
          <slot
            v-if="$scopedSlots[item.key]"
            :name="item.key"
            :data="scope.row"
          >
          </slot>
          <span v-else>{
  { scope.row[item.key] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" :width="operationWidth" v-if="operation">
        <template slot-scope="scope">
          <slot
            v-if="$scopedSlots.operation"
            name="operation"
            :data="scope.row"
          >
          </slot>
          <span v-else>
            <el-button
              size="small"
              type="primary"
              @click="handleEdit(scope.$index, scope.row)"
              plain
            >
              编辑
            </el-button>
            <el-popconfirm
              title="这是一段内容确定删除吗？"
              @confirm="handleDelete(scope.$index, scope.row)"
            >
              <el-button
                size="small"
                type="danger"
                slot="reference"
                class="ml-2"
                plain
              >
                删除
              </el-button>
            </el-popconfirm>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <div class="mt-3" v-if="pagination">
      <el-pagination
        @size-change="handleSize"
        @current-change="handleCurrent"
        :current-page="page2"
        :page-sizes="sizes"
        :page-size="size2"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  props: {
    // 表格数据
    data: {
      type: Array,
      default: function() {
        return [];
      }
    },
    // 表格列
    columns: {
      type: Array,
      default: function() {
        return [];
      }
    },
    // 多选开关
    selection: {
      type: Boolean,
      default: function() {
        return false;
      }
    },
    // 操作列显示/隐藏
    operation: {
      type: Boolean,
      default: function() {
        return true;
      }
    },
    // 操作列宽度
    operationWidth: {
      type: Number,
      default: function() {
        return 200;
      }
    },
    // 是否显示/隐藏添加按钮
    showAdd: {
      type: Boolean,
      default: function() {
        return true;
      }
    },
    // 分页显示/隐藏
    pagination: {
      type: Boolean,
      default: function() {
        return true;
      }
    },
    // 页数大小数组
    sizes: {
      type: Array,
      default: function() {
        return [10, 20, 50, 100, 200, 500];
      }
    },
    // 分页显示多少条信息
    size: {
      type: Number,
      default: function() {
        return 10;
      }
    },
    // 当前页
    page: {
      type: Number,
      default: function() {
        return 1;
      }
    },
    // 总共多少条
    total: {
      type: Number,
      default: function() {
        return 0;
      }
    }
  },
  data() {
    return {
      // 分页显示多少条
      size2: this.size,
      // 页数
      page2: this.page
    };
  },
  mounted() {},
  methods: {
    /**
     * @description: 多选结果集合
     * @author: chenbz
     * @date: 2021/4/15
     */
    handleSelectionChange(val) {
      this.$emit("handleSelectionChange", val);
    },
    /**
     * @description: 点击删除按钮
     * @author: chenbz
     * @date: 2021/4/15
     */
    handleDelete(index, row) {
      this.$emit("handleDelete", index, row);
    },
    /**
     * @description: 点击编辑按钮
     * @author: chenbz
     * @date: 2021/4/15
     */
    handleEdit(index, row) {
      this.$emit("handleEdit", index, row);
    },
    /**
     * @description: 点击添加按钮
     * @author: chenbz
     * @date: 2021/4/25
     */
    handleAdd() {
      this.$emit("handleAdd");
    },
    /**
     * @description: 改变了分页大小
     * @author: chenbz
     * @date: 2021/4/25
     */
    handleSize(size) {
      this.page2 = 1;
      this.size2 = size;
      let data = {
        page: this.page2,
        size: size
      };
      this.$emit("handleSize", data);
    },
    /***
     * @description: 改变了分页页数
     * @author: chenbz
     * @date: 2021/4/25
     */
    handleCurrent(current) {
      this.page2 = current;
      let data = {
        page: current,
        size: this.size2
      };
      this.$emit("handleCurrent", data);
    }
  }
};
</script>

<style scoped></style>

# 页面引入

src/views/test.vue

<template>
  <div>
    <h2>测试中心</h2>
    <el-divider></el-divider>
    <MyTable
      :data="table.data"
      :columns="table.columns"
      :total="table.total"
      @handleDelete="handleDelete"
      @handleEdit="handleEdit"
      @handleAdd="handleAdd"
      @handleSize="handleSize"
      @handleCurrent="handleCurrent"
    >
    </MyTable>
  </div>
</template>

<script>
import MyTable from "@/components/Table.vue";
export default {
  name: "test",
  components: {
    MyTable
  },
  data() {
    return {
      table: {
        data: [
          {
            id: 1,
            date: "2016-05-04",
            name: "王小虎1",
            address: "上海市普陀区金沙江路 1518 弄"
          },
          {
            id: 2,
            date: "2016-05-04",
            name: "王小虎2",
            address: "上海市普陀区金沙江路 1517 弄"
          },
          {
            id: 3,
            date: "2016-05-01",
            name: "王小虎3",
            address: "上海市普陀区金沙江路 1519 弄"
          },
          {
            id: 4,
            date: "2016-05-03",
            name: "王小虎4",
            address: "上海市普陀区金沙江路 1516 弄"
          }
        ],
        columns: [
          {
            title: "时间",
            key: "date",
            width: 250
          },
          {
            title: "名字",
            key: "name"
          },
          {
            title: "地址",
            key: "address"
          }
        ],
        total: 500,
        index: ""
      }
    };
  },
  mounted() {},
  methods: {
    // 点击删除按钮
    handleDelete(index, row) {
      console.log(row);
      this.table.data.splice(index, 1);
    },
    // 点击编辑按钮
    handleEdit(index, row) {
      console.log(index);
      console.log(row);
    },
    // 点击添加按钮
    handleAdd() {
      console.log("add");
    },
    // 改变了分页大小
    handleSize(size) {
      console.log(size);
    },
    // 改变了分页页数
    handleCurrent(current) {
      console.log(current);
    }
  }
};
</script>

<style scoped></style>

# 自定义列

<MyTable
  :data="table.data"
  :columns="table.columns"
  :total="table.total"
  @handleDelete="handleDelete"
  @handleEdit="handleEdit"
  @handleAdd="handleAdd"
  @handleSize="handleSize"
  @handleCurrent="handleCurrent"
>
  <template slot="date" slot-scope="scope">
    <i class="el-icon-time"></i>
    <span style="margin-left: 10px">{
  { scope.data.date }}</span>
  </template>
</MyTable>

使用 template 包含自定义的内容，slot一定要对应好字段，slot-scope会接收对象，使用scope.data.属性调用

# 参数说明

# columns

# 方法

# 效果图

转载：https://blog.csdn.net/weixin_42863549/article/details/116167063