自定义el表格组件custom-el-table（二次封装elemnetUI表格组件 ）

使用

安装

npm install custom-el-table || yarn add custom-el-table

main.js全局注册

import customElTable from 'custom-el-table'

import 'custom-el-table/lib/custom-el-table.css'

Attr（属性）

|参数字段|参数说明|类型|可选值|默认值| |-------|--------|----|-----|------| |url |请求url, 为空不发送请求; 改变url, 则table会重新发送请求|String|—|—| |reqMethod |请求方式|String|get,post,put,delete|get| |id |主键,勾选/修改/删除必用,请求根据定义的属性值获取主键,即row[this.id]|String|—|id| |firstPage|当前分页值|Number|—|1| |dataPath |渲染组件的分页数据在接口返回的数据中的路径, 嵌套对象使用.表示|String|—|payload.content| |noPaginationDataPath |渲染组件的分页数据在接口返回的数据中的路径, 嵌套对象使用.表示即可|String|—|payload| |totalPath |分页数据的总数在接口返回的数据中的路径, 嵌套对象使用.表示即可|String|—|payload.totalElements| |pageKey |请求的时候如果接口需要的页码的查询 key 不同的时候可以指定|String|—|page| |pageSizeKey |请求的时候如果接口需要的分页数量的查询 key 不同的时候可以指定|String|—|size| |columns |列属性设置,参考Table-column|Array|—|[]| |searchForm |查询表单字段渲染|Array|—|[]| |canSearchCollapse |是否开启搜索栏折叠|Boolean|—|false| |beforeSearch |点击查询按钮, 查询前执行的函数|Function|—|{}| |persistSelection |切换页面时，已勾选项是否保留|Boolean|—|false| |是否有操作列 |是否显示操作列|Boolean|—|true| |isSelectNum |是否显示当前选中项数量|Boolean|—|false| |isTablePattern |是否显示表格区域内容，不显示时可以使用插槽customTemplate|Boolean|—|true| |searchBtnShow |头部表单搜索按钮显示|Boolean|—|true| |resetBtnShow |头部表单筛选重置按钮显示|String|—|—| |searchBtnText |头部表单搜索按钮文本|String|—|查询| |resetBtnText |头部表单重置按钮文本|String|—|重置| |extraButtons |操作列的自定义按钮, 渲染的是element-ui的button, 支持包括style在内的部分属性|Array|—|[]| |headerButtons |头部的自定义按钮, 渲染的是element-ui的button, 支持包括style在内的部分属性|Array|—|[]| |singleElection |存在勾选配置时，是否隐藏全选勾选框改为单选|Boolean|—|false| |hasFilterColumn |是否显示定制列|Boolean|—|false| |hasPagination |是否分页。如果不分页，则请求传参page=-1|Boolean|—|true| |hasPaginationBorder |分页值是否增加边框|Boolean|—|false| |paginationLayout|分页组件的子组件布局，子组件名逗号分隔，对应el-pagination的layout属性|String|total/sizes/prev/pager/next/jumper|total, sizes, prev, pager, next, jumper| |paginationSizes |分页组件的每页显示个数选择器的选项设置|Array|—|[10, 20, 30, 40, 50]| |paginationSize |分页组件的每页显示个数选择器默认选项，对应el-pagination的page-size属性|Number|—|10| |noPaginationSize |不分页时的size的大小|Number|—|999| |tableAttrs |参考element table 属性设置|Object|—|{}| |operationAttrs |操作列属性|Object|—|{width: '', fixed: 'right'}| |customQuery |向请求url添加的额外参数。|Object|—|{}| |extraQuery |向请求url添加的额外参数，可用.sync修饰。|Object|—|false| |saveQuery |是否开启使用路由url保存query参数的功能|Boolean|—|true| |operationButtonType |操作栏按钮类型，text 为文本按钮, button 为普通按钮|String|text/button|text| |buttonSize |按钮 大小|String|medium/small/mini|small| |axiosConfig |设置axios的config参数|Object|—|{}| |isSearchCollapse |折叠状态|Boolean|—|false|

Method（方法）

|方法名|方法说明|参数| |-------|--------|----| |rowClick|表格单行被点击时|row, column, event| |getList|获取列表数据|{ loading: true }| |search|表单搜索|—| |resetSearch|重置查询，相当于点击「重置」按钮|—| |handleSizeChange|分页size发生变化时|val| |handleCurrentChange|分页currentPage 改变时会触发|val| |toggleRowSelection|切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否|row, isSelected| |clearSelection|清空多选项|—| |correctPage|判断是否返回上一页|—| |rowClassName|行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className|...args|

Events（事件）

|事件名|事件说明|参数| |-------|--------|----| |selectionChange|勾选项发生变化时|val| |rowClick|单行被点击时|row, column, event| |update|请求返回, 数据更新后触发|data, resp| |error|请求数据失败，返回err对象|err| |reset|按下重置按钮后触发|—|

Slot（插槽）

|插槽名|插槽说明| |-------|--------| |search:{prop}|自定义内容插入至筛选列某prop字段后| |search|额外的搜索内容, 当searchForm不满足需求时可以使用| |collapse|自定义折叠按钮, 默认的样式文案不满足时可以使用，scope 默认返回当前折叠状态 Boolean| |header|额外的header内容, 当headerButtons不满足需求时可以使用，作用域传入selected| |customTemplate|自定义表格区域内容，只有当isTablePattern为false时才可使用| |noData|不显示表格，自定义显示内容|

custom-el-table columns Attr(列属性)

|参数|说明|类型|可选值|默认值| |-------|--------|----|-----|------| |type |对应列的类型。如果设置了 selection 则显示多选框；如果设置了 index 则显示该行的索引（从 1 开始计算）；如果设置了 expand 则显示为一个可展开的按钮 string| selection/index/expand| —| |index |如果设置了 type=index，可以通过传递 index 属性来自定义索引 |number, Function(index)| - |-| |column-key| column 的 key，如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件| string| —| —| |label| 显示的标题| string |—| —| |prop |对应列内容的字段名，也可以使用 property 属性 |string| — |—| |width| 对应列的宽度| string| — |—| |min-width| 对应列的最小宽度，与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列 |string |—| —| |fixed| 列是否固定在左侧或者右侧，true 表示固定在左侧 |string, boolean| true, left, right |—| |render-header |列标题 Label 区域渲染使用的Function |Function(h, { column, $index })| — |—| |sortable| 对应列是否可以排序，如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件 |boolean, string| true, false, |'custom' false| |sort-method |对数据进行排序的时候使用的方法，仅当 sortable 设置为 true 的时候有效，需返回一个数字，和 Array.sort 表现一致| Function(a, b)| — |—| |sort-by |指定数据按照哪个属性进行排序，仅当 sortable 设置为 true 且没有设置 sort-method 的时候有效。如果 sort-by 为数组，则先按照第 1 个属性排序，如果第 1 个相等，再按照第 2 个排序，以此类推| String/Array/Function(row, index)| —| —| |sort-orders| 数据在排序时所使用排序策略的轮转顺序，仅当 sortable 为 true 时有效。需传入一个数组，随着用户点击表头，该列依次按照数组中元素的顺序进行排序| array| 数组中的元素需为以下三者之一：ascending 表示升序，descending 表示降序，null 表示还原为原始顺序| ['ascending', 'descending', null]| |resizable| 对应列是否可以通过拖动改变宽度（需要在 el-table 上设置 border 属性为真）| boolean |— |true| |formatter| 用来格式化内容| Function(row, column, cellValue, index) |—| —| |show-overflow-tooltip| 当内容过长被隐藏时显示 tooltip| Boolean| —| false| |align |对齐方式| String| left/center/right |left| |header-align|表头对齐方式，若不设置该项，则使用表格的对齐方式| String| left/center/right |—| |class-name| 列的 className| string| — |—|

示例

<template>
  <div class="model">
    <basic-container>
      <!-- 自定义el表格 -->
      <custom-el-table ref="dataTable" v-bind="tableConfig"></custom-el-table>
    </basic-container>
  </div>
</template>

<script>
import {pageUrl} from '@/api/business/bccontracttemplate'
export default {
  data() {
    return {
      tableConfig: {
        url: pageUrl,
        reqMethod: 'get',
        pageKey: 'current',
        hasFilterColumn: false,
        dataPath: 'data.records',
        totalPath: 'data.total',
        searchBtnText: '搜索',
        saveQuery: false,
        extraQuery: {},
        columns: [
          {prop: 'index', label: '序号', width: 50, 'show-overflow-tooltip': true, formatter: (a, b, c, index) => index + 1},
          {prop: 'code', label: '编号', minWidth: 120, 'show-overflow-tooltip': true},
          {prop: 'name', label: '名称', minWidth: 100, 'show-overflow-tooltip': true},
          {prop: 'userName', label: '姓名', minWidth: 100, 'show-overflow-tooltip': true},
          {prop: 'gender', label: '性别', minWidth: 50, 'show-overflow-tooltip': true, formatter: ({gender}) => this.mapGender[gender] || '未知'},
          {prop: 'age', label: '年龄', minWidth: 50, 'show-overflow-tooltip': true},
          {prop: 'mobile', label: '手机号码', minWidth: 80, 'show-overflow-tooltip': true},
          {prop: 'address', label: '家庭住址', minWidth: 100, 'show-overflow-tooltip': true},
          {
            prop: 'accessories',
            label: '附件',
            minWidth: 100,
            'show-overflow-tooltip': true,
            formatter: ({accessories}) => {
              if (accessories) {
                return (
                  <div class="contractFile" onClick={() => console.log('点击')}>
                    <a href="javascript:void(0)">扫描件</a>
                  </div>
                )
              } else {
                return ''
              }
            }
          },
          {prop: 'createTime', label: '创建时间', 'show-overflow-tooltip': true}
        ],
        searchForm: [
          {type: 'input', label: '编号', id: 'code', el: {placeholder: '编号', clearable: true}},
          {type: 'input', label: '名称', id: 'name', el: {placeholder: '名称', clearable: true}}
        ],
        headerButtons: [
          {
            type: 'primary',
            text: '新建',
            icon: 'el-icon-plus',
            atClick: () => {
              return Promise.resolve(false) // 页面不刷新请求
            },
            show: () => true // 可做权限显示处理
          }
        ],
        extraButtons: [
          {
            text: '修改',
            atClick: ({id}) => {
              return Promise.resolve(false) // 页面不刷新请求
            },
            show: () => true // 可做权限显示处理
          },
          {
            text: '详情',
            atClick: ({id}) => {
              return Promise.resolve(false) // 页面不刷新请求
            },
            show: () => true // 可做权限显示处理
          },
          {
            text: '删除',
            icon: 'el-icon-delete',
            atClick: ({id, name}) => {
              return Promise.resolve(false) // 页面不刷新请求
            },
            show: () => true // 可做权限显示处理
          }
        ],
        tableAttrs: {border: true},
        operationAttrs: {
          minWidth: '120px'
        }
      }
    }
  },
  components: {},
  created() {},
  computed: {},
  methods: {}
}
</script>
<style lang="scss" scoped></style>