sim-el-table-plus v1.0.12

sim-el-table-plus是对element-ui table的二次封装，增加了以下功能：

• 集成分页组件
• 表格列可配置化
• 操作栏列可配置化
• 动态调整分页大小，自适应屏幕高度分页
• 支持复杂表头
• 支持按照指定的key自动合并行

1. 安装

npm install sim-el-table-plus

2. 使用示例

<template>
  <el-table-plus
    ref="permission-table"
    :option-column="optionColumn"
    :load-data="loadData"
    :columns="columns"
    is-compact
    :search-data="searchParam"
    :auto-page-size="true"
  >
  </el-table-plus>
</template>

<script>
  import ElTablePlus from 'sim-el-table-plus'

  export default {
    name: "index",
    components: {
      ElTablePlus,
    },
    data() {
      return {
        //这里是搜索参数的配置,该参数变动后,后自动触发表格的load-data方法重新渲染数据
        searchParam:{

        },
        //这里是表格列的配置
        columns: [
          {prop: 'userId', label: 'ID', width: '70', align: 'center'},
          {prop: 'userName', label: '名称', align: 'center'},
          {prop: 'userTypeName', label: '类型', width: '100', align: 'center'},
          {prop: 'userRoleRes', label: '归属角色', width: '100', align: 'center'},
          {prop: 'viewPermission',label: '查看权限',width: '100',align: 'center'},
          {prop: 'createDate', label: '创建时间', width: '180', align: 'center'},
          {prop: 'expDate',label: '过期时间',width: '100',align: 'center',isSlot: true},
          {prop: 'statusName', label: '状态', width: '80', align: 'center'}
        ],
        //这里是操作栏列的配置
        optionColumn: {
          options: [
            {
              type: 'text',
              text: '编辑',
              handler: (row) => {
                //点击改按钮时，你的处理逻辑
              },
              disabled: (row) => {
                //true:禁用,false:不禁用, 默认不禁用
                return false;
              }
            }, {
              type: 'text',
              text: '解冻',
              handler: (row) => {
                //your handler
              },
              disabled: (row) => {
                //true:disabled,false:not disabled
                return false;
              }
            }, {
              type: 'text',
              text: '冻结',
              handler: (row) => {
                //your handler
              },
              disabled: (row) => {
                //true:disabled,false:not disabled
                return false;
              }
            }, {
              type: 'text',
              text: '停用',
              handler: (row) => {
                //your handler
              },
              disabled: (row) => {
                //true:disabled,false:not disabled
                return false;
              }
            }, {
              type: 'text',
              text: '删除',
              handler: (row) => {
                //your handler
              },
              disabled: (row) => {
                //true:disabled,false:not disabled
                return false;
              }
            }
          ],
          fixed: 'right',
          width: '230'
        }
      }
    },
    methods:{
      loadData(resolve, pageInfo, searchData) {
        //这里是你请求后台的代码
        //注意：如果需要分页，则resolve参数为一个对象，格式如下
        let data = {
          //总页数
          total: 55,
          //数据列表
          list: []
        };
        //如果不需要分页 则需设置pagination=false 然后直接resolve一个列表即可
        resolve(data)
      },
      /**
       * 搜索
       */
      search(){
        this.$refs['permission-table'].refresh();
      },
    }
  }
</script>

2. el-table-plus扩展属性

3. columns配置

columns为一个数组，数组对象内容均为原生element ui的el-table-column属性（部分属性，有用到其他的再添加），已支持的属性如下：

3.1 简单表头示例：

columns: [
    {
        label: '菜单ID', prop: 'menuId', align: 'center', width: '100px'
    },
    {
        label: '菜单名称', prop: 'menuName'
    }
]

3.2 复杂表头示例：

columns: [
      {
        label: '权限ID', prop: 'purviewId', align: 'center', columns: [
          {label: '权限ID', prop: 'purviewId'},
          {label: '权限名称', prop: 'purviewName'},
        ]
      },
      {
        label: '权限名称', prop: 'purviewName'
      },
      {
        label: '权限编码', prop: 'purviewCode'
      }
    ]

4. optionColumn配置

optionColumn为一个对象，对象内容均为原生element ui的el-table-column属性（部分属性，有用到其他的再添加），已支持的属性如下：

4.1 optionColumn.options配置

示例：

optionColumn: {
          options: [
            {
              type: 'text',
              size: 'mini',
              text: '新增',
              handler: (row) => {
                //这里进行逻辑处理
              }
            }, {
              type: 'text',
              size: 'mini',
              text: '删除',
              handler: (row) => {
                //这里进行逻辑处理
              }
            }
          ],
          width: '100px',
        }

5. el-table-plus事件