element-table-plugin

表格插件

基于Element，根据配置为网页添加表格

Features

• 展示静态数据
• 配置接口，自动请求，展示动态数据
• 分页、换页
• 统一的空数据时的展示效果
• 固定列、排序、设置列的宽度、控制列的展示
• 自定义列模板
• 鼠标浮在单元格上，展示完整内容，支持一键复制

引入

// main.js

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import elementTable from 'element-table-plugin'
import App from './App.vue'

Vue.use(ElementUI)
Vue.use(elementTable, { // 详见fields
  page: 'page',
  pageSize: 'limit',
  code: 'stat',
  apiSuccess: 1,
  data: 'data.list', // 取表格数据
  total: 'data.total', // 取总条数
})
// or
// Vue.use(elementTable)

new Vue({
  render: h => h(App),
}).$mount('#app')

// index.vue

<element-table
  :initRequest="request"
  :initColumns="columns"
  :canChangeColumns="canChangeColumns"
  :initPagination="pagination">
    <template #action="{row}">
      <span @click="edit(row)">编辑</span>
    </template>
</element-table>

<script>
export default {
  data () {
    return {
      request: {
        url: '/api/data/list',
        method: 'post',
      },
      columns: [
        {
          prop: 'name',
          label: '姓名',
          fixed: 'left',
          width: '280px',
        },
        {
          prop: 'desc',
          label: '描述',
          showOverflowPopover: true,
        },
        {
          prop: 'create_time',
          label: '创建时间',
          sortable: true,
        },
        {
          prop: 'action',
          label: '操作',
        }
      ],
      canChangeColumns: true,
      pagination: {
        pageSize: 20,
      },
    }
  },
  methods: {
    edit (row) {
      //
    },
  },
}
</script>

props

initRequest

• 请求表身，与axios中的一致，支持异步传入

• 类型：object

• 默认值：{}

initFields

• 字段集

• 类型：object

• 默认值：{}

• 属性的列表：

参数	说明	类型	required	默认值
page	当前页	string	false	-
pageSize	每页条数	string	false	-
code	状态码	string	false	-
apiSuccess	成功的状态码的值	number	false	-
data	表身	string	false	-
total	总条目数	string	false	-

initColumns

• 表头

• 类型：Array<object>

• 默认值：[]

• 元素的属性的列表：

参数	说明	类型	required	默认值
prop	列的prop，与Element中的一致	string	true	-
label	列的label，与Element中的一致	string	false	-
align	对齐方式，与Element中的一致	string	false	-
width	列的宽，与Element中的一致	string	false	-
showOverflowPopover	是否用浮层显示单元格的详情	boolean	false	-
fixed	固定列，与Element中的一致	string | boolean	false	-
sortable	是否支持排序	boolean	false	-

initData

• 表身，配了initRequest就不用传这个

• 类型：Array<object>

• 默认值：[]

initPagination

• 分页

• 类型：object

• 属性的列表：

参数	说明	类型	required	默认值
page	当前页	number	false	1
pageSize	每页条数	number	false	30
total	总条目数	number	false	0

maxHeight

• 表格的最大高度，与Element中的一致

Methods

方法名	说明
getFields	返回表头和表身的数据

slot

name	说明
列的prop	自定义列的内容，参数为 { row }