ZenWeb Grid Render for VUE Element UI

只需要一行代码即可完成数据表格渲染，所有表格项都由服务端返回，减轻前端重复工作。

安装说明

需要依赖的版本

• element-ui: ^2.15.6
• vue: ^2.6.11
• vue-template-compiler: ^2.6.11

安装本模块

$ npm i @zenweb/grid-vue-element

在项目中全局启用

import '@zenweb/grid-vue-element/lib/zengrid.css';
import ZenGrid from '@zenweb/grid-vue-element';
Vue.use(ZenGrid);

在项目中使用

<template>
  <zen-grid-render :data="data" @getData="getData" v-loading="loading">
    <template #filter-prepend>
      过滤器左侧插槽
    </template>
    <template #filter-append>
      过滤器右侧插槽
    </template>
    <template #column-prepend>
      <el-table-column>表格左侧列</el-table-column>
    </template>
    <!-- 自定义某一列渲染 -->
    <template #column-by-id>
      <el-table-column label="#" prop="id" />
    </template>
    <template #column-append>
      <el-table-column label="操作">
        <template slot-scope="{row}">
          <el-link type="primary" @click="() => edit(row)">编辑</el-link>&nbsp;
          <el-link type="danger" @click="() => del(row)">删除</el-link>
        </template>
      </el-table-column>
    </template>
    <template #footer-prepend>
      分页左侧插槽
    </template>
    <template #filter-append>
      分页右侧插槽
    </template>
  </zen-grid-render>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      data: null,
      loading: true,
    }
  },
  mounted() {
    // 表格不会主动加载数据，第一次打开需要手动加载
    this.getData();
  },
  methods: {
    // grid 在触发过滤、分页时会将 params 参数传递过来
    getData(params) {
      // 加载状态
      this.loading = true;
      // 向服务器请求数据，这里的 $api 由项目提供
      this.$api.get('/some_gird', { params }).then(r => {
        this.data = r;
      }, e => {
        this.$message.error('数据加载错误');
      }).finally(() => {
        this.loading = false;
      });
    },
    edit(row) {
      this.$alert(`编辑数据：${row.id}`);
    },
    del(row) {
      this.$alert(`删除数据：${row.id}`);
    },
  }
}
</script>

自定义数据列

<template #column-by-*="col"> 的内部默认实现代码

<el-table-column
  :key="col.key"
  :prop="col.key"
  :label="col.label || col.key"
  :sortable="col.sortable"
  :width="col.width"
  :min-width="col.minWidth"
  :align="col.align"
/>