element ui之封装一个table

<template>
  <div>
    <Table :data="tableData" border :cell-style="cell">
      <template v-for="column in columns">
        <TableColumn :key="column.prop" :prop="column.prop" :label="column.title" :min-width="column.width"
          :fixed="column.fixed" :sortable="column.sortable" show-overflow-tooltip :align="column.alignItem"
          v-if="!column.action">
          <!-- <template slot-scope="scope" >
             <el-tag :type="scope.row.status+'' | statusFilter" v-if="column.title=='状态'">
            {{ scope.row.status ? "启用" : "禁用" }}
          </el-tag>
        </template> -->
        </TableColumn>
        <TableColumn v-else :key="column.prop" :prop="column.prop" :label="column.title" :width="column.minWidth"
          :fixed="column.fixed" :align="column.alignItem">
          <template slot-scope="scope">
            <template v-for="(fn, index) in column.actions">
              <Divider direction="vertical" v-if="index > 0" />
              <Button :type="fn.type" size="mini" @click="handleClick(scope.row, fn.fnName)">{{ fn.title }}</Button>
            </template>
          </template>
        </TableColumn>
      </template>
    </Table>
  </div>
</template>
<script>
import { Table, TableColumn, Divider, Button } from 'element-ui'
export default {
  name: "tableC",
  components: { Table, TableColumn, Divider, Button },
  filters: {
    statusFilter(status) {
      const statusMap = {
        启用: "success",
        禁用: "info",
        删除: "danger",
      };
      return statusMap[status];
    },
  },
  props: {
    columns: {
      required: true, type: Array, default: () => {
        return []
      }
    },
    tableData: {
      required: true,
      type: Array,
      default: () => {
        return []
      }
    },

  },
  methods: {
    cell({ row, column, rowIndex, columnIndex }) {
      // console.log(row);
      // console.log(column);
      // console.log(rowIndex);
      // console.log(columnIndex);
      if (column.label == '状态') {
        if (row.status == '启用') {
          return 'color: #409EFF'
        } else if (row.status == '禁用') {
          return 'color: #909399'
        }
      }

    },
    handleClick(row, fnName) {
      this.$emit(`${fnName}`, row)
    }
  }
};
</script>

<style></style>

调用的时候

<template>
  <div style="width: 96%; margin: 1%">
    <div style="display: flex; justify-content: flex-end">
      <el-button style="margin: 0 2% 1% 0" type="primary" @click="handleCreate">新增</el-button>
    </div>
    <TableC :columns="columns" :tableData="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      " @delete="deletes" @edit="edit" :default-sort="{ prop: 'id', order: 'descending' }"></TableC>

    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="currentPage" :page-sizes="[10, 15, 20, 25]" :page-size="pageSize" :total="tableData.length"
      layout="total, sizes, prev, pager, next">
    </el-pagination>
  </div>
</template>

<script>
import TableC from "../../components/rtable/index";
import { getlist, deleteInfo } from "@/api/manage";
export default {
  name: "Product",
  components: { TableC },
  data() {
    return {
      type: 1,
      temp: {
        title: "",
        uplode: "",
        imgPath: "",
        status: " ",
        sortNo: "",
        id: "",
      },
      textMap: {
        update: "编辑",
        create: "新增",
      },
      currentPage: 1, // 当前页
      pageSize: 10, // 每页显示条数
      columns: [
        {
          prop: "id",
          title: "id",
          width: "80",
          fixed: true,
          sortable: true,
          alignItem: "center",
        },
        { prop: "title", title: "标题", width: "220" },
        { prop: "description", title: "描述", width: "250" },
        { prop: "imgPath", title: "图片路径", width: "360" },
        { prop: "linkTo", title: "演示地址", width: "360" },
        { prop: "sortNo", title: "序号", width: "80", alignItem: "center" },
        { prop: "status", title: "状态", width: "80", alignItem: "center" },
        {
          action: true,
          title: "操作",
          alignItem: "center",
          minWidth: "160",
          fixed: "right",
          actions: [
            { fnName: "edit", title: "编辑", type: "primary" },
            { fnName: "delete", title: "删除", type: "danger" },
          ],
        },
      ],
      tableData: [],
    };
  },
  created() {
    this.getListData();
  },
  methods: {
    resetTemp() {
      this.temp = {
        sortNo: "",
        status: "",
        title: "",
        uplode: "",
        imgPath: "",
        id: "",
      };
    },
    getListData() {
      let data = {
        type: this.type,
      };
      getlist(data).then((response) => {
        this.tableData = response.records;
        // this.webUrl = localStorage.getItem("webUrl");
        this.tableData.forEach((item) => {
          // if (item.imgPath) {
          //   item.imgPath = this.webUrl + item.imgPath;
          // }
          item.status == 1 ? (item.status = "启用") : (item.status = "禁用");
          // item.type == 1 ? (item.type = "案例") : (item.type = "产品");
        });
      });
    },

    // 新增
    handleCreate() {
      this.resetTemp();
      return this.$router.push({
        name: "detail",
        query: {
          type: this.type,
          typeStatus: "proAdd",
        },
      });
    },
    edit(e) {
      let id = e.id;
      return this.$router.push({
        name: "detail",
        query: {
          id: id,
          type: this.type,
          typeStatus: "proUpdate",
        },
      });
    },
    deletes(e) {
      let that = this;
      let id = e.id;
      this.$confirm("确定要删除该条记录吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteInfo({
            id: id,
          }).then((res) => {
            that.getListData();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
  },
};
</script>
<style>
.el-pagination {
  text-align: center !important;
  margin-top: 20px;
}
</style>