custom-el-table v0.1.5

自定义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（属性）

Method（方法）

Events（事件）

Slot（插槽）

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

示例

<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>