element table 二次封装

在使用element-ui组件库时，通常需要二次封装组件

1. 封装 table+page 组件

<template>
  <div class="table_page">
    <el-table
      :row-key="getRowKey"
      v-loading="options.loading"
      :data="dataSource"
      :max-height="options.maxHeight"
      :stripe="options.stripe"
      :border="options.border"
      @row-click="handleRowClick"
      @selection-change="handleSelectionChange"
      highlight-current-row
      :cell-style="cellStyle"
    >
      <!--selection选择框-->
      <el-table-column
        v-if="options.mutiSelect"
        type="selection"
        :reserve-selection="true"
        style="width:50px"
        align="center"
      >
      </el-table-column>
      <!--序号-->
      <el-table-column
        v-if="options.index"
        label="序号"
        type="index"
        width="50"
        align="center"
      >
      </el-table-column>
      <!--数据列-->
      <template v-for="(column, index) in columns">
        <el-table-column
          :key="index"
          :prop="column.prop"
          :label="column.label"
          :align="column.align || 'center'"
          :width="column.width"
          :fixed="column.fixed"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <!--  含有click函数 -->
            <template v-if="column.onClick">
              <span
                @click.stop="column.onClick(scope.row, scope.$index, scope)"
                >{{ scope.row[column.prop] }}</span
              >
            </template>
            <!-- 含有render函数 -->
            <template v-else-if="column.render">
              <RenderDom
                :row="scope.row"
                :index="index"
                :render="column.render"
              />
            </template>
            <!-- 有img图片显示 -->
            <template v-else-if="column.img">
              <img :src="scope.row[column.prop]" alt="加载失败" />
            </template>
            <!-- 没有render函数且没有图片要显示 -->
            <template v-else>
              <span>{{ scope.row[column.prop] }}</span>
            </template>
            <!-- button 操作按钮  caseStatus-->
            <template v-if="column.button">
              <template v-for="(btn, i) in column.group">
                <el-button
                  :key="i"
                  :type="btn.type"
                  :round="btn.round"
                  :size="btn.size || 'mini'"
                  :icon="btn.icon"
                  :plain="btn.plain"
                  @click.stop="btn.onClick(scope.row, scope.$index, scope)"
                  >{{ btn.name }}</el-button
                >
              </template>
            </template>
            <!-- slot 你可以其他常用项 -->
          </template>
        </el-table-column>
      </template>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      v-if="pagination"
      background
      :total="pagination.total"
      :page-size="pagination.pageSize"
      layout="total, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handleIndexChange"
      style="padding: 20px;text-align: right"
    ></el-pagination>
  </div>
</template>
<script>
export default {
  components: {
    RenderDom: {
      functional: true,
      props: {
        row: Object,
        render: Function,
        index: Number,
        column: {
          type: Object,
          default: null
        }
      },

      render: (h, data) => {
        const params = {
          row: data.props.row,
          index: data.props.index
        };

        if (data.props.column) params.column = data.props.column;
        return data.props.render(h, params);
      }
    }
  },
  props: {
    dataSource: Array, // table内容数据
    options: Object, // 表格参数控制 maxHeight、stripe 等等...
    columns: Array, // 表头
    fetch: {
      type: Function,
      default: function() {}
    }, // 获取数据的函数
    pagination: Object, // 分页，不传则不显示
    typeTable: String
  },
  data() {
    return {};
  },
  created() {
    // 传入的options覆盖默认设置
    this.$parent.options = Object.assign(
      {
        // maxHeight: 500,
        stripe: false, // 是否为斑马纹
        border: false
      },
      this.options
    );

    this.options.initTable && this.fetch();
  },
  methods: {
    // table 文本颜色
    cellStyle(row, column, rowIndex, columnIndex) {
      if (row.column.label == "当前状态" && row.row.status == 1) {
        return "color:#0ED1AA";
      } else if (row.column.label == "当前状态" && row.row.status == 2) {
        return "color:#F3384F";
      }
    },
    // pageSize 改变时触发事件
    handleSizeChange(size) {
      this.pagination.pageSize = size;
      this.fetch();
    },
    // currentPage 改变时触发事件
    handleIndexChange(current) {
      this.pagination.pageIndex = current;
      this.fetch();
    },
    // 多选框选择变化触发事件
    handleSelectionChange(selection) {
      this.$emit("selection-change", selection);
    },
    // 点击table某一行时触发事件
    handleRowClick(row, event, column) {
      // console.log(row, '父组件')
      this.$emit("handleRowClick", row, event, column);
    },
    // 翻页时，记住上一页的勾选标识
    getRowKey(row) {
      return row.id;
    }
  }
};
</script>

2. 引用table 组件

<template>
  <div class="home">
    <tablePage
      :columns="columns"
      :dataSource="tableData"
      :options="options"
      :fetch="fetchTableData"
      :pagination="pagination"
    />
  </div>
</template>

<script>

import tablePage from "@/components/table-page/table-page";
export default {
  name: "Home",
  components: {
    tablePage
  },
  data() {
    return {
      columns: [
        {
          prop: "id",
          label: "编号"
        },
        {
          prop: "name",
          label: "banner图名称"
        },
        {
          img: true,
          prop: "img",
          label: "预览图"
        },
        {
          prop: "where",
          label: "位置"
        },
        {
          prop: "type",
          label: "banner图性质",
          onClick: (row, index) => {
              // 图片不可点击，链接时可点击
            console.log(row, "row");
          }
        },
        {
          prop: "time",
          label: "添加时间"
        },
        {
          prop: "status",
          label: "当前状态",
          render: (h, params) => {
            console.log();
            return h("span", params.row.status == 1 ? "启用中" : "禁用中");
          }
        },
        {
          button: true,
          label: "操作",
          group: [
            {
              name: "编辑",
              type: "primary",
              round: true,
              plain: false,
              onClick: (row, index) => {
              }
            }
          ]
        }
      ],
      tableData: [
        {
          id: 1,
          name: "武汉救援2",
          img: "http://www.ahgame.com/uploads/allimg/141110/1-1411101F433.jpg",
          where: "1",
          type: "图片",
          time: "2020-06-19",
          status: 1
        },
        {
          id: 2,
          name: "武汉救援",
          img: "http://www.ahgame.com/uploads/allimg/141110/1-1411101F433.jpg",
          where: "2",
          type: "h5",
          time: "2020-06-19",
          status: 2
        }
      ],
      // 分页
      pagination: {
        total: 40,
        pageIndex: 1,
        pageSize: 10
      },
      options: {
        stripe: true,  // 斑马纹
        mutiSelect: false,   // 多选框
        index: false, // 显示序号， 多选则 mutiSelect
        loading: false, // 表格动画
        initTable: true // 是否一挂载就加载数据
      }
    };
  },
  methods: {
    fetchTableData() {}
  }
};
</script>
<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
}
</style>