El Table Plus

Introduction

A high-level table component, integrating el-table and el-pagination of Element UI.

Feature

• 整合 el-table 与 el-pagination 的高阶组件
• 通用列表分页查询业务需求快速成型
• 用更简单的方式自定义表头(render-header)与自定义表体(render-body)
• 组件内部维护数据源与分页
• 仅支持远程排序

Quick Start

$ npm install --save el-table-plus

import ElTablePlus from 'el-table-plus';

Vue.use(ElTablePlus);

API

Table Attributes

Table Attributes - column

同 Element 官方文档 Table-column Attributes，并新增以下属性

Table Events

Table Methods

Example

html

<el-form :model="form" inline>
  <el-form-item>
    <el-input v-model="form.search" placeholder="请输入"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button @click="handleSubmit">查询</el-button>
  </el-form-item>
</el-form>
<el-table-plus ref="table" @sort-change="handleSortChange" @filter-change="handleFilterChange"
               :current-change-async="handleCurrentChangeAsync" :columns="tableColumns"
               :page-size="20"></el-table-plus>

js

// Notice: 在 vue 文件使用 jsx 语法需在 script 标签添加 type="text/jsx"
export default {
  data() {
    return {
      form: {
        search_text: ''
      },
      tableColumns: [
        {
          label: '普通列',
          prop: 'id'
        },
        {
          label: '排序列',
          prop: 'name',
          sortable: 'custom'
        },
        {
          label: '过滤项列',
          prop: 'name',
          filters: [{text: '有效', value: 1}, {text: '无效', value: 0}],
          columnKey: 'columnKey'
        },
        {
          label: '格式化列',
          prop: 'status',
          formatter(status) {
            return {
              1: '有效',
              0: '无效',
            }[status];
          }
        },
        {
          renderHeader: (h) => {
            return (
              <span>自定义列</span>
            );
          },
          renderBody: (h, {id}) => {
            return (
              <el-button onClick={() => this.handleEdit(id)}>编辑</el-button>
            );
          }
        }
      ]
    };
  },
  methods: {
    handleFilterChange(filters) {
      // TODO
    },
    handleSortChange({column, prop, order}) {
      // TODO
    },
    handleEdit(id) {
      // TODO
    },
    handleSubmit() {
      this.$refs.table.reload();
    },
    async handleCurrentChangeAsync(currentPage, pageSize) {
      const res = await getYourAjaxData({
        ...this.form,
        page_now: currentPage,
        page_size: pageSize
      })

      return {
        data: res.data.tableData,
        total: res.data.total
      }
    }
  },
  mounted() {
    this.handleSubmit();
  }
}