通用组件-Table组件

Table组件是一个后台前端表格组件的解决方案，它基于vue-element-admin，及vue 和 element-ui实现，虽是在vue-element-admin上封装实现，但也可以应用与vue 和 element-ui的其他前端实现。

这里主要是完成基本表格的数据渲染处理，排序，自定义操作的植入。

引用范例

<template>
    <div>
        // 这里是写入Table组件
        <table-list
          ref="table"
          :page-info="pageInfo"
          :list-obj="listObj"
          :table-obj="tableObj"
          :list-query="listQuery"
        />
    </div
</template>
<script>
// 这里import 引入组件
import DataForm from '@/views/1a-sanyangma/pp-web-template/form'
export default {
  name: 'ComplexTable',
  components: { TableList }, // 这里需要注册该组件
  data: {
    return {
        pageInfo: {
            isPageUrl: false, // 这里是定义当前请求路径是否是全路径
            url: '/twms/manager/api/basedata/accountitem', // 请求路径
            id: 'taiId' // 该id是用于数据处理的关键id
          },
        tableObj: {
            sord: 'desc',
            border: true,
            btnsGroup: [ // 这里是表格种的行操作项
              {
                title: '详情',
                icon: 'el-icon-view',
                disabled: (row) => { return false },
                clickMethod: (row) => { vm.handleDealData(row, 'detail') } },
              {
                title: '编辑',
                icon: 'el-icon-edit',
                disabled: false,
                clickMethod: (row) => { vm.handleDealData(row, 'update') } },
              { title: '删除', icon: 'el-icon-delete', disabled: false }
            ]
        },
        listObj: [ // 这里是定义行中每一列的展示对象是谁
            { field: 'taiId', type: 'TEXT', name: '序号', width: 80, sortable: 'true', fixed: true },
            { field: 'taiCode', type: 'TEXT', name: '费目编码', width: 110, sortable: 'true' },
            { field: 'taiName', type: 'TEXT', name: '费目名称', width: 110, sortable: 'true' },
            { field: 'taiType', type: 'SLOT_VALUE', name: '费目类型', width: 110, sortable: 'true', data: 'costType' },
            { field: 'taiStatus', type: 'SLOT_VALUE', name: '状态', width: 80, sortable: 'true', data: 'dataState' },
            { field: 'remark', type: 'TEXT', name: '备注', width: 150, sortable: 'true' },
            { field: 'createuser', type: 'TEXT', name: '创建者', width: 150, sortable: 'true' },
            { field: 'createtime', type: 'TEXT', name: '创建时间', width: 150, sortable: 'true' },
            { field: 'updateuser', type: 'TEXT', name: '更新者', width: 150, sortable: 'true' },
            { field: 'updatetime', type: 'TEXT', name: '更新时间', width: 150, sortable: 'true' },
            { field: 'actions', type: 'BTNS', name: '操作', width: 180, fixed: 'right' }
        ],
        listQuery: {} // 这里是表格相关的查询条件
    },
 created() {
    // 这里是初始化查询条件
    this.initFilterParams()
    // 触发第一次获取table数据
    this.getList()
  },
  methods: {
    // 调用Table组件中的控制table的高度，来适应窗口大小，并且达到分页控件底部固定
    resizeTable() {
      this.$nextTick(function() {
        this.$refs.table.changeTableMaxHeight()
      })
    },
    initFilterParams() {
      this.listQuery = {
        page: 1,
        sidx: this.pageInfo.id,
        sord: this.tableObj.sord
      }
    },
    // 这里是当查询时要调度用的获取数据列表的方法
    getList() {
      this.$nextTick(() => {
        // 获取table组件里的按多少笔数据来分页
        this.listQuery['rows'] = this.$refs.table.pageSizes[0]
        this.$refs.table.getList(this.listQuery, data => {
          // 开发提示：这里是返回的data，是列表上当前获取的分页数据，如果你要使用，可在这里扩展功能
          // console.log(data)
        })
      })
    }
}

Table组件的属性

1. pageInfo

2. tableObj

btnsGroup的定义

3. listObj里的每一行

{ field: 'createuser', type: 'TEXT', name: '创建者', width: 150, sortable: true },

关于type的定义说明：

let userInfo = {
    name: '孙悟空',  ------------>例①：用TXET
    gender: 0, // 0男，1女 ------>例②：用SLOT_VALUE，并在rawData中注册：[男，女]
    avatar: 'http://img.cm/a', -->例③：用SLOT_IMG
    // 家庭地址
    province: '重庆市', --------->例④：用SLOT_FIELDS，并定义scope: ['province', 'city', 'zone']
    city: '重庆市',
    zone: '江北',
    // 身份证
    card: {
        no: '999999999', ----->例⑤：用TEXT_SUB，field为'card.no'会,直接取到userInfo.card.no的值
        date: '2020-10-10'
    },
    // 有2个小孩
    children: [
        { name: '悟饭' }, 
        { name: '悟天' }
    ]------------------------>例⑥：用TEXT_FUNCTION，还是自己来告诉这个组件要取什么吧，传一个getData:方法吧。
}