最近项目打算重构，项目的模块几乎都是以后台查询展示的传统的增删改差模式，所以卑微的我想要自己封装一下table，

效果图

子组件：

<!--
 * @Descripttion: 
 * @version: 
 * @Author: sueRimn
 * @Date: 2020-06-18 17:40:26
 * @LastEditors: sueRimn
 * @LastEditTime: 2020-06-19 15:24:39
-->
<template>
  <div class="table">
    <el-table
      :data="tableData"
      style="width: 100%"
      border
      min-width="1190"
      max-height="300"
      :header-row-class-name="tableRowClassName"
      @selection-change="handleSelectionChange"
      @row-click="clickTable"
    >
      <template v-for="(item, index) of columns">
        <el-table-column
          v-if="item.id === 'text'"
          :key="index"
          :fixed="item.fixed"
          :prop="item.id"
          :label="item.label"
          :align="item.align ? item.align : 'center'"
          :width="item.width"
        >
          <!--if判断的是父组件传的表头是操作的id名-->
          <template slot-scope="scope">
            <el-button
              v-for="item1 in item.list"
              :key="item1.id"
              @click="handleDelete(scope.row, item1.id)"
              type="text"
              size="small"
              >{{ item1.name }}</el-button
            >
            <!--可以自行增加按钮，请改变点击事件的第二个参数，父组件会根据第二个参数判断当前点击的是什么按钮-->
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="item.id === 'button'"
          :key="index"
          :fixed="item.fixed"
          :prop="item.id"
          :label="item.label"
          :align="item.align ? item.align : 'center'"
          :width="item.width"
        >
          <!--if判断的是父组件传的表头是操作的id名-->
          <template slot-scope="scope">
            <el-button
              v-for="item2 in item.list"
              :key="item2.id"
              @click="handleEdit(scope.row, item2.id)"
              size="mini"
              :type="item2.type"
              >{{ item2.name }}</el-button
            >
            <!--可以自行增加按钮，请改变点击事件的第二个参数，父组件会根据第二个参数判断当前点击的是什么按钮-->
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="item.index === 'index'"
          :type="item.index"
          :key="index"
          :width="item.width"
        >
        </el-table-column>
        <el-table-column
          v-else
          :label="item.label"
          :key="index"
          :fixed="item.fixed"
          :prop="item.id"
          :align="item.align ? item.align : 'center'"
          :width="item.width"
          :type="item.type"
        >
        </el-table-column>
        <!--可以传align,width和type来控制表格的居中，宽度和类型（比如需要序号，type传index）-->
      </template>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="pagesizes"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>
<script>
export default {
  props: {
    tableData: {
      // 表格数据源 默认为空数组
      type: Array,
      default: () => []
    },
    columns: {
      // 表格的字段展示 默认为空数组
      type: Array,
      default: () => []
    },
    pagesizes: {
      type: Array,
      default: () => []
    },
    total: { type: Number, default: 0 },
    pageSize: { type: Number, default: 0 }
  },
  data() {
    return {
      currentPage: 1
    };
  },
  methods: {
    // 正常
    handleSelectionChange(val) {
      this.$emit("handleSelectionChange", { val: val });
    },
    // 正常
    clickTable(row, column, event) {
      this.$emit("clickTable", { row: row, column: column, event: event });
    },
    // 正常
    handleEdit(index, row) {
      this.$emit("handleEdit", { index: index, row: row });
    },
    // 正常
    handleDelete(index, row) {
      this.$emit("handleDelete", { index: index, row: row });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.$emit("handleSizeChange", val);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.$emit("handleCurrentChange", val);
    },
    tableRowClassName({ row, rowIndex }) {
      console.log(row, rowIndex);
      if (rowIndex === 0) {
        return "warning-row";
      } else if (rowIndex === 1) {
        return "warning-row";
      }
      return "";
    }
  }
};
</script>
<style lang="less">
.el-pagination {
  margin-top: 20px;
}
//.warning-row .is-leaf 是修改table的表头的背景颜色；
.warning-row .is-leaf { color: #1a68b5; background-color: #e3edf7 !important; } </style>

父组件调用
  1 <flight-table
  2           :tableData="tableData"
  3           :columns="columns"
  4           :pagesizes="pagesizes"
  5           @handleDelete="handleDelete"
  6           @handleSelectionChange="handleSelectionChange"
  7           @clickTable="clickTable"
  8           @handleEdit="handleEdit"
  9           @handleSizeChange="handleSizeChange"
 10           @handleCurrentChange="handleCurrentChange"
 11           :total="total"
 12           :pageSize="pageSize"
 13 ></flight-table>
 14 import flightTable from "@/components/flightTable.vue";
    import jsondata from "assets/json/vue.json";

15  export default{
 16   components: {
 17     flightTable ,
 18  19   },
 20     data() {
 21         return {
 22            tableData: [
 23         {
 24           date: "2016-05-03",
 25           name: "王小虎",
 26           province: "上海",
 27           city: "普陀区",
 28           address: "上海市普陀区金沙江路 1518 弄",
 29           zip: 200333
 30         },
 31         {
 32           date: "2016-05-02",
 33           name: "王小虎",
 34           province: "上海",
 35           city: "普陀区",
 36           address: "上海市普陀区金沙江路 1518 弄",
 37           zip: 200333
 38         },
 39         {
 40           date: "2016-05-04",
 41           name: "王小虎",
 42           province: "上海",
 43           city: "普陀区",
 44           address: "上海市普陀区金沙江路 1518 弄",
 45           zip: 200333
 46         },
 47         {
 48           date: "2016-05-01",
 49           name: "王小虎",
 50           province: "上海",
 51           city: "普陀区",
 52           address: "上海市普陀区金沙江路 1518 弄",
 53           zip: 200333
 54         },
 55         {
 56           date: "2016-05-08",
 57           name: "王小虎",
 58           province: "上海",
 59           city: "普陀区",
 60           address: "上海市普陀区金沙江路 1518 弄",
 61           zip: 200333
 62         },
 63         {
 64           date: "2016-05-06",
 65           name: "王小虎",
 66           province: "上海",
 67           city: "普陀区",
 68           address: "上海市普陀区金沙江路 1518 弄",
 69           zip: 200333
 70         },
 71         {
 72           date: "2016-05-07",
 73           name: "王小虎",
 74           province: "上海",
 75           city: "普陀区",
 76           address: "上海市普陀区金沙江路 1518 弄",
 77           zip: 200333
 78         }
 79       ],
 80       columns: [
 81         {
 82           id: "selection",
 83           type: "selection",
 84           label: "",
 85           fixed: "left",
 86           width: "55",
 87           prop: "",
 88           isShow: true,
 89           align: "center"
 90         },
 91         {
 92           id: "button",
 93           type: "button",
 94           label: "操作",
 95           fixed: "left",
 96           width: "200",
 97           prop: "",
 98           isShow: true,
 99           align: "center",
100           list: [
101             {
102               id: "examine",
103               name: "查看",
104               type: ""
105             },
106             {
107               id: "compile",
108               name: "编辑",
109               type: "danger"
110             }
111           ]
112         },
113         {
114           id: "text",
115           type: "text",
116           label: "跳转",
117           fixed: "left",
118           width: "120",
119           prop: "",
120           isShow: true,
121           align: "center",
122           list: [{ id: "jump", name: "跳转", type: "", handleClick: this.jump }]
123         },
124         {
125           id: "index",
126           type: "index",
127           label: "序列号",
128           fixed: "left",
129           width: "120",
130           prop: "",
131           isShow: true,
132           align: "center"
133         },
134         {
135           id: "date",
136           type: "",
137           label: "日期",
138           fixed: "left",
139           width: "150",
140           prop: "date",
141           isShow: true,
142           align: "center"
143         },
144         {
145           id: "name",
146           type: "",
147           label: "姓名",
148           fixed: false,
149           width: "120",
150           prop: "name",
151           isShow: true,
152           align: "center"
153         },
154         {
155           id: "province",
156           type: "",
157           label: "省份",
158           fixed: false,
159           width: "120",
160           prop: "province",
161           isShow: true,
162           align: "center"
163         },
164         {
165           id: "city",
166           type: "",
167           label: "市区",
168           fixed: false,
169           width: "120",
170           prop: "city",
171           isShow: true,
172           align: "center"
173         },
174         {
175           id: "address",
176           type: "",
177           label: "地址",
178           fixed: false,
179           width: "300",
180           prop: "address",
181           isShow: true,
182           align: "center"
183         },
184         {
185           id: "zip",
186           type: "",
187           label: "邮编",
188           fixed: false,
189           width: "120",
190           prop: "zip",
191           isShow: true,
192           align: "center"
193         }
194       ],
195       pagesizes: [1, 2, 3, 4],
196       total: 10,
197       pageSize: 1
198          }
199     },
200     methods: {
201       //text的跳转触发
202     handleDelete(val) {
203       console.log(val);
204       this.StringUtil.getDecorator();
205     },
206     // checkbox的触发接收
207     handleSelectionChange(val) {
208       console.log(val);
209       this.StringUtil.getDecorator();
210     },
211     // 点击tbody的行触发
212     clickTable(val) {
213       console.log(val);
214       this.StringUtil.getDecorator();
215     },
216     //button的触发
217     handleEdit(val) {
218       console.log(val);
219       this.StringUtil.getDecorator();
220     },
221     handleSizeChange(val) {
222       console.log(val);
223       this.total = 100;
224       this.tableData = jsondata.tabledata;
225       console.log(jsondata.tableData);
226     },
227     handleCurrentChange(val) {
228       console.log(val);
229       this.total = 200;
230 
231       this.tableData = jsondata.tabledata2;
232     }
233     }
234 }
235  </script>

在这里的table表格的封装，我是引入自己做的json数据来触发变化的，

卑微前端，记录自己的项目封装的组件，方便以后自己用，如果有哪里不合理，请各路大神多多指教。