Ame's blog
Ame
2021-01-22

el-table-ts

# el-table-ts

内含 el-table-ts、el-table-http 组件，el-table-http 组件核心为 axios 与 el-table-ts 组件

# 特性

  1. 传递 data 和 column 两个必要属性即可渲染出表格，兼容 el-table 的属性/事件。
  2. 基于 el-table-ts、axios，封装出 el-table-http 组件，可以在仅指定url的情况下帮助你渲染出表格。
  3. 兼容 element table 的属性及事件。
  4. 支持 slot / jsx(参考 babel-plugin-transform-vue-jsx (opens new window)) / h 函数三种方式自定义渲染表头，单元格数据。
  5. 对外暴露出 table 内部的 store，this(_self，表格组件自身)，如果你很熟悉 el-table，相信这可以帮到你。
  6. 增加 el-table scroll 事件。
  7. 集成 el-pagination 分页组件，且内置了插槽，自定义更加便捷。
  8. 可在非 TS 环境下正常使用，但需自行构建 jsx 环境(参考 babel-plugin-transform-vue-jsx (opens new window))。

# 安装和引入

安装

npm install el-table-ts -S
1

引入

该组件强依赖于 element-ui 的 el-table 组件，请确保使用该组件前已引入 el-table

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

import ElTableTs from 'el-table-ts'
import 'el-table-ts/dist/el-table-ts.css'

Vue.use(ElementUI)
Vue.use(ElTableTs)
1
2
3
4
5
6
7
8

# 基础用法

data 和 columns 两个属性

data 定义表格数据，columns 定义列属性

  • 1
共 0 条
<template>
  <el-table-ts :data="list" :columns="columns" />
</template>

<script>
  const listData = [
    {
      name: '刘小凡',
      sex: '男',
      age: 18,
      address: '江苏省 南京市',
      desc: {
        height: 180,
      },
    },
    {
      name: '张如霞',
      sex: '女',
      age: 16,
      address: '江苏省 南京市',
      desc: {
        height: 160,
      },
    },
  ]
  export default {
    data() {
      return {
        list: listData,
        columns: [
          { label: '姓名', prop: 'name' },
          { label: '性别', prop: 'sex' },
          { label: '年龄', prop: 'age' },
          { label: '地址', prop: 'address' },
          { label: '描述', prop: 'desc.height' },
        ],
      }
    },
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
Expand Copy

# element-ui 属性及事件

支持 el-table(参考 element table-attributes 部分 (opens new window))，el-table-column 所有属性和事件(参考 element table-column-attributes 部分 (opens new window))，表格属性绑定在组件属性中，列属性绑定在 columns 对象 属性中

按下 F12(打开浏览器控制台)，点击年龄列排序查看sort-change事件

  • 1
共 0 条
<template>
  <el-table-ts
    :data="list"
    :columns="columns"
    @row-click="handleRowClick"
    @sort-change="handleSortChange"
    stripe
    border
  />
</template>

<script>
  const listData = [
    {
      name: '刘小凡',
      sex: '男',
      age: 18,
      address: '江苏省 南京市',
      desc: {
        height: 180,
      },
    },
    {
      name: '张如霞',
      sex: '女',
      age: 16,
      address: '江苏省 南京市',
      desc: {
        height: 160,
      },
    },
  ]
  export default {
    data() {
      return {
        list: listData,
        columns: [
          { label: '姓名', prop: 'name' },
          { label: '性别', prop: 'sex' },
          { label: '年龄', prop: 'age', sortable: true },
          { label: '地址', prop: 'address' },
          { label: '描述', prop: 'desc.height', align: 'right' },
        ],
      }
    },
    methods: {
      handleRowClick(row, column, event) {
        console.log(row, column, event)
      },
      handleSortChange(o) {
        console.log(o)
      },
    },
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
Expand Copy

# 自定义表格-表头/单元格

支持 jsx/slot/h 函数三种方式的自定义渲染。 你可以在自定义渲染中获取到 {cellValue, row, column, $index, h} 对象

slot 语法：可以在列属性scopedSlots.customRender的属性值设置为 slot 名称，然后在 template 模板中写 slot

jsx/h 语法：可直接在列定义中设置customRender函数中返回 JSX（注意此时需要 jsx 支持），或者返回 h 函数生成的 VNode。

  • 1
共 0 条
<template>
  <el-table-ts :data="list" :columns="columns">
    <template #handle="{ cellValue, row, column, $index, h }">
      <el-button size="small" type="primary" @click="handleView(row)">
        查看
      </el-button>
    </template>
  </el-table-ts>
</template>

<script>
  const listData = [
    {
      name: '刘小凡',
      sex: '男',
      age: 18,
      address: '江苏省 南京市',
      desc: {
        height: 180,
      },
    },
    {
      name: '张如霞',
      sex: '女',
      age: 16,
      address: '江苏省 南京市',
      desc: {
        height: 160,
      },
    },
  ]
  export default {
    data() {
      return {
        list: listData,
        columns: [
          { label: '姓名', prop: 'name' },
          { label: '性别', prop: 'sex' },
          {
            label: '年龄',
            prop: 'age',
            minWidth: '120px',
            // 可以这样
            // customRender/customTitle都支持JSX、h函数，请自行查阅这俩的使用方法
            customRender: ({ cellValue, row, column }) => {
              return (
                <div>
                  {row.name}：{cellValue}岁
                </div>
              )
            },
            customTitle: ({ $index }) => {
              return h('span', '这是一个美好的愿望')
            },
          },
          { label: '地址', prop: 'address' },
          { label: '描述', prop: 'desc.height' },
          {
            label: '操作',
            fixed: 'right',
            prop: 'handle',
            // 也可以这样
            scopedSlots: { customRender: 'handle' },
          },
        ],
      }
    },
    methods: {
      handleView({ name, age }) {
        this.$message.success(`${name} ${age}岁`)
      },
    },
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
Expand Copy

# column Attributes 注意事项

Table-column Attributes 中 type[index/selection]时，使用的还是原生(el-table)的渲染方式，不再支持 customRender/scopedSlots

element-ui 列中有 formatter (opens new window)属性，el-table-ts 并不打算兼容该写法，因为 customRender 更强大

type[expand]支持 customRender/scopedSlots，如下

  • 1
共 0 条
<template>
  <el-table-ts :data="list" :columns="columns">
    <template #handle="{ cellValue, row, column, $index, h }">
      {{ `${row.name}：${row.age}岁` }}
    </template>
  </el-table-ts>
</template>

<script>
  const listData = [
    {
      name: '刘小凡',
      sex: '男',
      age: 18,
      address: '江苏省 南京市',
      desc: {
        height: 180,
      },
    },
    {
      name: '张如霞',
      sex: '女',
      age: 16,
      address: '江苏省 南京市',
      desc: {
        height: 160,
      },
    },
  ]
  export default {
    data() {
      return {
        list: listData,
        columns: [
          {
            label: '',
            type: 'expand',
            // 可以这样
            scopedSlots: { customRender: 'handle' },

            // 也可以这样
            // customRender: (val, row, column, index, h) =>
            //   h('div', `${row.name}、${row.storage}`),
          },
          { label: '姓名', prop: 'name' },
          { label: '性别', prop: 'sex' },
          { label: '年龄', prop: 'age' },
          { label: '地址', prop: 'address' },
          { label: '描述', prop: 'desc.height' },
        ],
      }
    },
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
Expand Copy

# scroll 事件

按下 F12(打开控制台)，滚动表格查看scroll事件

  • 1
共 0 条
<template>
  <el-table-ts
    :data="list"
    :columns="columns"
    height="350"
    @scroll="handleScroll"
  />
</template>

<script>
  const listData = [
    {
      name: '刘小凡',
      sex: '男',
      age: 18,
      address: '江苏省 南京市',
      desc: {
        height: 180,
      },
    },
    {
      name: '张如霞',
      sex: '女',
      age: 16,
      address: '江苏省 南京市',
      desc: {
        height: 160,
      },
    },
    {
      name: '张如霞',
      sex: '女',
      age: 16,
      address: '江苏省 南京市',
      desc: {
        height: 160,
      },
    },
    {
      name: '张如霞',
      sex: '女',
      age: 16,
      address: '江苏省 南京市',
      desc: {
        height: 160,
      },
    },
  ]
  export default {
    data() {
      return {
        list: listData,
        columns: [
          { label: '姓名', prop: 'name' },
          { label: '性别', prop: 'sex' },
          { label: '年龄', prop: 'age' },
          { label: '地址', prop: 'address' },
          { label: '描述', prop: 'desc.height' },
        ],
      }
    },
    methods: {
      handleScroll(e) {
        console.log(e)
      },
    },
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
Expand Copy

# 集成 pagination

默认展示

分页器，参考 el-pagination 文档 (opens new window)，

默认分页配置为

const defPagination = {
  currentPage: 1,
  pageSizes: [10, 20, 30, 50],
  pageSize: 10,
  layout: 'prev, pager, next, sizes, total',
  background: true,
}
1
2
3
4
5
6
7

增加内置插槽,名为pagination（使用方法见下方代码示例），可访问到总数total,分页配置项config

分页事件详见

ElTableTs 组件中未进行区分 page-change 事件是来自页码切换还是上一页或下一页，

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 10
共 100 条
<template>
  <el-table-ts
    :data="list"
    :columns="columns"
    :pagination="{ layout: 'prev, pager, next', background: true }"
    :total="100"
    @page-change="handlePageChange"
  >
    <template #pagination="{ total, config }">
      <span>{{ total }}/第五页</span>
    </template>
  </el-table-ts>
</template>

<script>
  const listData = [
    {
      name: '刘小凡',
      sex: '男',
      age: 18,
      address: '江苏省 南京市',
      desc: {
        height: 180,
      },
    },
    {
      name: '刘小凡',
      sex: '男',
      age: 18,
      address: '江苏省 南京市',
      desc: {
        height: 180,
      },
    },
  ]
  export default {
    data() {
      return {
        list: listData,
        columns: [
          { label: '姓名', prop: 'name' },
          { label: '性别', prop: 'sex' },
          { label: '年龄', prop: 'age' },
          { label: '地址', prop: 'address' },
          { label: '描述', prop: 'desc.height' },
        ],
      }
    },
    methods: {
      handlePageChange({ pageSize, currentPage }) {
        console.log(pageSize, currentPage)
      },
    },
  }
</script>
<style>
  .el-pagination {
    margin-top: 10px;
    margin-left: -10px;
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
Expand Copy

# 内置指令

组件内部集成表格高度自适应指令，支持配置表格底部偏移量bottomOffset（等同于设置表格高度偏移量）

  • 1
共 0 条
<template>
  <el-table-ts
    :data="list"
    :columns="columns"
    :directives="directives"
  />
</template>

<script>
  const listData = [
    {
      name: '刘小凡',
      sex: '男',
      age: 18,
      address: '江苏省 南京市',
      desc: {
        height: 180,
      },
    },
    {
      name: '刘小凡',
      sex: '男',
      age: 18,
      address: '江苏省 南京市',
      desc: {
        height: 180,
      },
    },
  ]
  export default {
    data() {
      return {
        list: listData,
        columns: [
          { label: '姓名', prop: 'name' },
          { label: '性别', prop: 'sex' },
          { label: '年龄', prop: 'age' },
          { label: '地址', prop: 'address' },
          { label: '描述', prop: 'desc.height' },
        ],
        // 内置指令配置项
        directives: {
          // 高度自适应指令配置项，默认值为 40
          heightAdaptive: {
            bottomOffset: 40,
          },
        },
      }
    },
    methods: {},
  }
</script>
<style>
  .el-pagination {
    margin-top: 10px;
    margin-left: -10px;
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
Expand Copy

# el-table-http

基于 el-table-ts 组件, axios。 使用同 el-table-ts，不同点在于增加了 network 配置项，当存在此配置项时，data 属性将失效

network对象支持的配置项如下

# network 对象属性

参数 类型 默认值 说明
url String 无 请求的 url，这个配置项只要存在，httpConfig 中 url 配置将失效。
method String get 请求方法，支持get，post。这个配置项只要存在，httpConfig 配置中的 method 就会失效。
createConfig Object {} 详情查看Axios 实例 (opens new window)
httpConfig Object {} 详情查看Axios 请求配置 (opens new window)
data Object {} 发起请求的数据，get -> params，post -> data
pag Object {
    pageSizeName:  'pageSize',
    pageNoName:  'pageNo'
}		 见pag 配置表格
path Object {
    dataPath: 'data',
    dataName: 'data'
}		 见path 配置表格

# page 配置

因为内部集成了分页插件，所以在使用分页功能时需要传入该对象以帮助发起分页请求

参数 类型 默认值 说明
pageSizeName String pageSize 每页条数字段名称
pageNoName String pageNo 页码字段名称

# path 配置表格

参数 类型 默认值 说明
dataPath String data data 的解析路径(对象取值语法 data.data 或 data[data]),到 data 的目录为止，不需要包含[dataname]，例如在标准格式下 dataPath 为 'data'
dataName String data 表格数据项的字段名

# network 对象方法

el-table-http 组件会对外暴露 render 方法，在此方法的参数中可以到组件 api，api 中有

参数 类型 默认值 说明
render Function 需要自行触发该函数，来决定发起 http 请求的及渲染表格的时机。常用于发起 http 之前更改 netWork 配置项再去渲染
暂无数据
  • 1
共 0 条
<template>
  <el-table-http :netWork="httpConfig" :columns="columns" @render="render" />
</template>

<script>
  export default {
    data() {
      return {
        columns: [
          { label: '姓名', prop: 'name' },
          { label: '性别', prop: 'sex' },
          { label: '年龄', prop: 'age' },
          { label: '地址', prop: 'address' },
          { label: '描述', prop: 'desc.height' },
        ],
        // 目前判断是否成功发起请求的唯一标识为  内部是否获取到关键数据
        httpConfig: {
          method: 'get',
          // 创建axios实例时传递的参数
          createConfig: {},

          // 发起请求时的额外参数，
          // 当已配置 method, url, data时，在httpConfig中这三个配置会失效
          httpConfig: {},

          // 发起请求时的额外数据
          data: {
            pageSizeTest: 10,
            pageNoTest: 1,
          },
          // 请求的url
          url: 'http://test.data',

          // 分页传参名称配置
          pag: {
            pageSizeName: 'pageSizeTest',
            pageNoName: 'pageNoTest',
          },

          // 解析路径
          // 标准格式为 {code, data: {[dataname]: 表格数据, total: 总条数}, msg }
          path: {
            // data的解析路径(对象取值语法data.data或data[data]),到data的目录为止，不需要包含[dataname]，例如在标准格式下 dataPath为 'data'
            // 不指定就按照标准格式路径去解析
            dataPath: 'data',
            // 不指定就默认dataName为data
            dataName: 'records',
          },
        },
      }
    },
    methods: {
      render(api) {
        console.log(api, '组件')
        api.render()
        // const timer = setTimeout(() => {
        //   api.render()
        //   console.log('默认渲染数据')
        //   clearTimeout(timer)
        // }, 2000)
      },
    },
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
Expand Copy

# API

# el-table-ts 属性

支持 el-table 上所有原有属性 (opens new window)，同时新增了以下 api。

参数 类型 默认值 说明
loading Boolean false 动效 loading
data Array [] 列表数据
columns Array [] column item 配置列表，
详细见如下 columns Attrs
pagination Object|Boolean true |
{    currentPage: 1,
     pageSizes: [10, 20, 30, 50],
     pageSize: 10,
     layout: 'prev, pager, next, sizes, total',
     background: true
}		 翻页器配置，默认显示翻页器。
相关 api 可查看el-pagination (opens new window)
directives Object|undefined { heightAdaptive: { bottomOffset: 40 } } 底部偏移 40 px，
或者说表格高度减少 40 px
total Number 0 翻页器条数总数

# el-table-ts 事件

兼容 el-table 上所有原有事件 (opens new window)，同时扩展以下 api。

事件名称 说明 说明
scroll table 滚动事件 e
page-change currentPage 改变时会触发 { pageSize, currentPage }
current-change currentPage 改变时会触发 { pageSize, currentPage }
size-change pageSize 改变时会触发 { pageSize, currentPage }
prev-click 用户点击上一页按钮改变当前页后触发 { pageSize, currentPage }
注意：el-table-http不支持
next-click 用户点击下一页按钮改变当前页后触发 { pageSize, currentPage }
注意：el-table-http不支持

# columns 属性

支持 el-table-column 所有原有属性 (opens new window)、Scoped Slot (opens new window),同时扩展以下 api：

属性 类型 默认值 说明
label String 列名称
prop String 列数据字段，支持多层对象嵌套，如 user.email.prefix
hidden Boolean false 是否隐藏该列。
customRender Function 自定义列数据渲染。customRender({cellValue, row, column, $index, h, store, _self})，支持 jsx 和 h 函数
customTitle Function 自定义列头部渲染。({column, $index, h, store, _self})，支持 jsx 和 h 函数
scopedSlots Object 包含default（默认插槽），header（el-table header (opens new window)）插槽 使用 slot 方式自定义渲染，替换 customRender/customTitle 函数。比如：{ customRender: 'slotName1', customTitle: 'slotName2' }

# 内置插槽

插槽名为pagination使用见集成-pagination 章节示例，可访问到总数total,分页配置项config，该插槽名不允许自定义、覆盖

# 内置指令

内置表格高度自适应指令

# 错误处理

当你在 columns 的 prop 属性中定义'取值字段'，但是在 data属性值中却没有该'取值字段'时，表格可正常渲染，此时cellValue的值为undefined，你可以使用 customRender 来确定渲染如何去渲染空值

编辑 (opens new window)
上次更新: 2021/12/31, 16:12:00
Vue-Router
el-form-plus

← el-form-plus→

最近更新
01
前端架构的核心构成
 01-01
02
前端架构定义
 01-01
03
Vue
 12-24
更多文章>
Theme by Vdoing | Copyright © 2020-2022 Ame | MIT License | 鲁ICP备18003274号-2