ld-table v1.1.1

el-table

二次封装 element ui 的 el-table

准备工作

1、下载依赖支持可选链式操作符：
@babel/plugin-proposal-optional-chaining

2、babel.config.js配置如下:
plugins: [
    '@babel/plugin-proposal-optional-chaining'
]

3、babel7以上才支持

插件的安装

NPM

npm i ld-table

引入插件

import Vue from 'vue'
import ldtable from 'ld-table'

Vue.use(ldtable)

基本用法

1、基本表格数据展示.初始化表格:initTable(); props为表格属性、thead为表头、tbody为表格数据、buttonsList为操作列、pagination为分页插件;

2、表格data对象里面的props、thead、tbody必填，其他参数可选

引入插件

import Vue from 'vue'
import ldtable from 'ld-table'

Vue.use(ldtable)

  <ld-table
      ref="table"
      v-loading="loading"
      :data="xBurnerTableData" 
      @columnClick="columnClick"
      @selection-change="selectionChange"
      @handleCurrentChange="handleCurrentChange"
      @handleSizeChange="handleSizeChange"
    ></ld-table>

    initTable () {
      let result = mockData
      this.xBurnerTableData = { // 传给表格data的对象
        props: { // 表格属性为必传
          height: '750', // 必传
          'row-key': 'deviceId', // 非必传
          showIndex: true, // 序号列非必传
          size: 'mini', // 非必传
          border: true, // 非必传
          currentRowKey:  result.records.length > 0 ? result.records[0].deviceId : "", // 提供给单选按钮的唯一值,默认选中行
          rowClassName: scope =>  scope.row.deviceId === 8002 ? "row-error" : "", // 处理行样式，非必传
        },
        check: { // 多选复选框非必传
          showCheckBox: true
        },
        radio: { // 单选按钮非必传
          showRadio: true,
          radioKey: 'deviceId' // 单选按钮显示时必填，唯一值
        },
        thead: this.thead, // 表头为必传
        tbody: result.records || [], // 表格数据为必传
        buttonsList: { // 操作按钮非必传
          fixed: 'right',
          btnsList: [ // 外层操作列表非必传
            {
              label: '修改',
              width: 60,
              type: 'text',
              size: 'small',
              columnClick: 'openDetail'
            },
            {
              label: '新增',
              width: 60,
              type: 'text',
              size: 'small',
              columnClick: 'openDetail'
            },
          ],
          moreBtnsList: [ // 操作列表非必传dropdown
            {
              label: '删除',
              columnClick: 'deleteFn'
            },
            {
              label: '详情',
              isShow: ()=> true,
              columnClick: 'openDetail'
            }
          ]
        },
        pagination: { // 分页插件非必传
          show: true,
          currentPage: result.current,
          pageSize: result.size,
          total: result.total,
          pageSizes: this.pageSizes,
          layout: this.layout
        }
      }
    },

多级表头传参示例

  thead = [
      {
        label: '姓名',
        key: 'name',
        width: 150,
        fixed: 'left', // 固定列
        columnClick: 'openDetail', // 点击事件
        formatter: {function} // 格式化列
      },
      {
        label: "住址",
        key: "address",
        width: "150",
        children：[{
          label: "小嗨",
          key: "xiaoHai",
          width: "150",
          sort: true, // 是否排序
          sortType:"string", // 排序规则
          formatter: {function}, 
          sortMethod: {function}, // 自定义排序规则
        }]
      }
    ]

Table Attributes

Table Events

Table Methods

使用实例：this.$refs.table.tableMethods("toggleRowSelection")(row, true);

Table-column多选列（check） Attributes

Table-column单选列（radio） Attributes

Table-column数据列 Attributes

buttonsList操作列 Attributes

buttonsList外层操作按钮 Attributes

moreBtnsList操作列表按钮（dropdown） Attributes

moreBtnsList/buttonsList操作按钮 Events

pagination Attributes

pagination Events

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.