element-table-render

基于element-ui表格的二次封装组件，支持以数组形式配置列信息，保留element-ui表格的所有特性，并允许自定义渲染单元格内容和控制表格显示隐藏。

安装

npm install element-table-render --save

依赖

• Vue 2.x
• Element UI 2.x

使用方法

全局注册

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import TableRender from 'element-table-render'

Vue.use(ElementUI)
Vue.component('TableRender', TableRender)

局部注册

import TableRender from 'element-table-render'

export default {
  components: {
    TableRender
  }
}

基础示例

<template>
  <table-render
    :columns="columns"
    :data="tableData"
    :visible="visible"
    border
    stripe
  ></table-render>
</template>

<script>
export default {
  data() {
    return {
      visible: true,
      tableData: [
        { id: 1, name: '张三', age: 28, status: 'active' },
        { id: 2, name: '李四', age: 32, status: 'inactive' },
        { id: 3, name: '王五', age: 24, status: 'active' }
      ],
      columns: [
        { prop: 'id', label: 'ID', width: 80 },
        { prop: 'name', label: '姓名', width: 120 },
        { prop: 'age', label: '年龄', width: 80 },
        { 
          label: '状态', 
          width: 120,
          render: (h, params) => {
            return h('el-tag', {
              props: {
                type: params.row.status === 'active' ? 'success' : 'danger'
              }
            }, params.row.status === 'active' ? '启用' : '禁用')
          }
        },
        { 
          label: '操作', 
          width: 180,
          render: (h, params) => {
            return h('div', [
              h('el-button', {
                props: { size: 'small' },
                on: { click: () => this.handleEdit(params.row) }
              }, '编辑'),
              h('el-button', {
                props: { size: 'small', type: 'danger' },
                on: { click: () => this.handleDelete(params.row) }
              }, '删除')
            ])
          }
        }
      ]
    }
  },
  methods: {
    handleEdit(row) {
      this.$message(`编辑 ${row.name}`)
    },
    handleDelete(row) {
      this.$message(`删除 ${row.name}`)
    }
  }
}
</script>

API

Props

| 参数 | 类型 | 说明 | 默认值 | |------|------|------|--------| | columns | Array | 表格列配置数组 | - | | data | Array | 表格数据源 | - | | visible | Boolean | 是否显示表格 | true |

Columns 配置项

支持element-ui表格列的所有原生属性，额外增加： | 参数 | 类型 | 说明 | |------|------|------| | render | Function | 自定义单元格渲染函数，接收 (h, params) 参数，其中params包含row, column, index |

许可证

MIT