element-ui vue 2.x 版本业务组件

# 表格

TIP

对 element-ui table 组件的扩展

# 基础用法

<template>
  <el-card>
    <pro-table :columns="columns" :data="dataSource"></pro-table>
  </el-card>
</template>

<script>
  export default {
    data() {
      return {
        columns: [
          {
            label: "日期",
            name: "date",
            width: 200,
          },
          {
            label: "姓名",
            name: "name",
            width: 200,
          },
          {
            label: "地址",
            name: "address",
          },
        ],
        dataSource: [
          {
            date: "2016-05-02",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
          },
          {
            date: "2016-05-04",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1517 弄",
          },
          {
            date: "2016-05-01",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1519 弄",
          },
          {
            date: "2016-05-03",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1516 弄",
          },
        ],
      };
    },
  };
</script>

<style lang="scss" scoped></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
显示代码 复制代码

# 带状态表格

<template>
  <el-card>
    <pro-table :columns="columns" :data="dataSource" :row-class-name="tableRowClassName"></pro-table>
  </el-card>
</template>

<script>
  export default {
    data() {
      return {
        columns: [
          {
            label: "日期",
            name: "date",
            width: 200,
          },
          {
            label: "姓名",
            name: "name",
            width: 200,
          },
          {
            label: "地址",
            name: "address",
          },
        ],
        dataSource: [
          {
            date: "2016-05-02",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
          },
          {
            date: "2016-05-04",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1517 弄",
          },
          {
            date: "2016-05-01",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1519 弄",
          },
          {
            date: "2016-05-03",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1516 弄",
          },
        ],
      };
    },
    methods: {
      tableRowClassName({ row, rowIndex }) {
        if (rowIndex === 1) {
          return "warning-row";
        } else if (rowIndex === 3) {
          return "success-row";
        }
        return "";
      },
    },
  };
</script>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</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
62
63
64
65
66
67
68
69
70
71
72
显示代码 复制代码

# 单个数据状态

<template>
  <el-card>
    <pro-table :columns="columns" :data="dataSource" :row-class-name="tableRowClassName"></pro-table>
  </el-card>
</template>

<script>
  export default {
    data() {
      return {
        columns: [
          {
            label: "日期",
            name: "date",
            width: 200,
          },
          {
            label: "姓名",
            name: "name",
            width: 200,
            tag({ $index }) {
              if ($index === 1) {
                return { type: "success" };
              } else if ($index === 3) {
                return { type: "warning" };
              }
              return { type: "danger" };
            },
          },
          {
            label: "性别",
            name: "sex",
            width: 200,
            tag: true,
            dict: [
              {
                value: 0,
                type: "danger",
                name: "女",
              },
              {
                value: 1,
                type: "success", //success/info/warning/danger
                name: "男",
              },
            ],
          },
          {
            label: "地址",
            name: "address",
          },
        ],
        dataSource: [
          {
            date: "2016-05-02",
            name: "王小虎",
            sex: 0,
            address: "上海市普陀区金沙江路 1518 弄",
          },
          {
            date: "2016-05-04",
            name: "王小虎",
            sex: 1,
            address: "上海市普陀区金沙江路 1517 弄",
          },
          {
            date: "2016-05-01",
            name: "王小虎",
            sex: 1,
            address: "上海市普陀区金沙江路 1519 弄",
          },
          {
            date: "2016-05-03",
            name: "王小虎",
            sex: 0,
            address: "上海市普陀区金沙江路 1516 弄",
          },
        ],
      };
    },
    methods: {
      tableRowClassName({ row, rowIndex }) {
        if (rowIndex === 1) {
          return "warning-row";
        } else if (rowIndex === 3) {
          return "success-row";
        }
        return "";
      },
    },
  };
</script>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
显示代码 复制代码

# 固定表头

只要在 pro-table 元素中定义了 height 属性，即可实现固定表头的表格，而不需要额外的代码。

<template>
  <el-card>
    <pro-table :columns="columns" :data="dataSource" height="250" border></pro-table>
  </el-card>
</template>

<script>
  export default {
    data() {
      return {
        columns: [
          {
            label: "日期",
            name: "date",
            width: 200,
          },
          {
            label: "姓名",
            name: "name",
            width: 200,
          },
          {
            label: "性别",
            name: "sex",
            width: 200,
            dict: [
              {
                value: 1,
                name: "男",
              },
              {
                value: 0,
                name: "女",
              },
            ],
          },
          {
            label: "地址",
            name: "address",
          },
        ],
        dataSource: [
          {
            date: "2016-05-02",
            name: "王小虎",
            sex: 0,
            address: "上海市普陀区金沙江路 1518 弄",
          },
          {
            date: "2016-05-04",
            name: "王小虎",
            sex: 1,
            address: "上海市普陀区金沙江路 1517 弄",
          },
          {
            date: "2016-05-01",
            name: "王小虎",
            sex: 1,
            address: "上海市普陀区金沙江路 1519 弄",
          },
          {
            date: "2016-05-03",
            name: "王小虎",
            sex: 0,
            address: "上海市普陀区金沙江路 1516 弄",
          },
          {
            date: "2016-05-02",
            name: "王小虎",
            sex: 0,
            address: "上海市普陀区金沙江路 1518 弄",
          },
          {
            date: "2016-05-04",
            name: "王小虎",
            sex: 1,
            address: "上海市普陀区金沙江路 1517 弄",
          },
          {
            date: "2016-05-01",
            name: "王小虎",
            sex: 1,
            address: "上海市普陀区金沙江路 1519 弄",
          },
          {
            date: "2016-05-03",
            name: "王小虎",
            sex: 0,
            address: "上海市普陀区金沙江路 1516 弄",
          },
        ],
      };
    },
    methods: {},
  };
</script>

<style></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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
显示代码 复制代码

# 多级表头

pro-table 元素中定义 header-nested 属性,

<template>
  <el-card>
    <pro-table :columns="columns" :data="dataSource" :header-nested="headerNested"></pro-table>
  </el-card>
</template>

<script>
  export default {
    data() {
      return {
        headerNested: [
          {
            prop: "date",
          },
          {
            label: "配送信息",
            children: [
              {
                prop: "name",
              },
              {
                label: "地址",
                children: [
                  {
                    prop: "province",
                  },
                  {
                    prop: "city",
                  },
                  {
                    prop: "address",
                  },
                ],
              },
            ],
          },
        ],
        columns: [
          {
            label: "日期",
            name: "date",
          },
          {
            label: "姓名",
            name: "name",
          },
          {
            label: "省份",
            name: "province",
          },
          {
            label: "市区",
            name: "city",
          },
          {
            label: "地址",
            name: "address",
          },
        ],
        dataSource: [
          {
            date: "2016-05-03",
            name: "王小虎",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1518 弄",
            zip: 200333,
          },
          {
            date: "2016-05-02",
            name: "王小虎",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1518 弄",
            zip: 200333,
          },
          {
            date: "2016-05-04",
            name: "王小虎",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1518 弄",
            zip: 200333,
          },
          {
            date: "2016-05-01",
            name: "王小虎",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1518 弄",
            zip: 200333,
          },
          {
            date: "2016-05-08",
            name: "王小虎",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1518 弄",
            zip: 200333,
          },
          {
            date: "2016-05-06",
            name: "王小虎",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1518 弄",
            zip: 200333,
          },
          {
            date: "2016-05-07",
            name: "王小虎",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1518 弄",
            zip: 200333,
          },
        ],
      };
    },
    methods: {},
  };
</script>

<style></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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
显示代码 复制代码

# 多选

只要在 pro-table 元素中定义了 selection 属性，即可实现多选。

<template>
  <el-card>
    <pro-table
      ref="table"
      :columns="columns"
      :data="dataSource"
      selection
      @selection-change="handleSelectionChange"
    >
    </pro-table>
    <div style="margin-top: 20px">
      <el-button @click="toggleSelection([dataSource[1], dataSource[2]])"
        >切换第二、第三行的选中状态</el-button
      >
      <el-button @click="toggleSelection()">取消选择</el-button>
    </div>
  </el-card>
</template>

<script>
  export default {
    data() {
      return {
        columns: [
          {
            label: "日期",
            name: "date",
            width: 200,
          },
          {
            label: "姓名",
            name: "name",
            width: 200,
          },
          {
            label: "地址",
            name: "address",
          },
        ],
        dataSource: [
          {
            date: "2016-05-02",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
          },
          {
            date: "2016-05-04",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1517 弄",
          },
          {
            date: "2016-05-01",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1519 弄",
          },
          {
            date: "2016-05-03",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1516 弄",
          },
        ],
        multipleSelection: [],
      };
    },
    methods: {
      toggleSelection(rows) {
        if (rows) {
          rows.forEach((row) => {
            this.$refs.table.toggleRowSelection(row);
          });
        } else {
          this.$refs.table.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
    },
  };
</script>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
显示代码 复制代码

# 展开行

通过设置 type="expand" 和 Scoped slot 可以开启展开行功能，el-table-column 的模板会被渲染成为展开行的内容，展开行可访问的属性与使用自定义列模板时的 Scoped slot 相同。

<template>
  <el-card>
    <pro-table ref="table" :columns="columns" :data="dataSource">
      <el-table-column type="expand">
        <template v-slot="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="商品名称">
              <span>{{ props.row.name }}</span>
            </el-form-item>
            <el-form-item label="所属店铺">
              <span>{{ props.row.shop }}</span>
            </el-form-item>
            <el-form-item label="商品 ID">
              <span>{{ props.row.id }}</span>
            </el-form-item>
            <el-form-item label="店铺 ID">
              <span>{{ props.row.shopId }}</span>
            </el-form-item>
            <el-form-item label="商品分类">
              <span>{{ props.row.category }}</span>
            </el-form-item>
            <el-form-item label="店铺地址">
              <span>{{ props.row.address }}</span>
            </el-form-item>
            <el-form-item label="商品描述">
              <span>{{ props.row.desc }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
    </pro-table>
  </el-card>
</template>

<script>
  export default {
    data() {
      return {
        columns: [
          {
            label: "商品 ID",
            name: "id",
          },
          {
            label: "商品名称",
            name: "name",
          },
          {
            label: "描述",
            name: "desc",
          },
        ],
        dataSource: [
          {
            id: "12987122",
            name: "好滋好味鸡蛋仔",
            category: "江浙小吃、小吃零食",
            desc: "荷兰优质淡奶，奶香浓而不腻",
            address: "上海市普陀区真北路",
            shop: "王小虎夫妻店",
            shopId: "10333",
          },
          {
            id: "12987123",
            name: "好滋好味鸡蛋仔",
            category: "江浙小吃、小吃零食",
            desc: "荷兰优质淡奶，奶香浓而不腻",
            address: "上海市普陀区真北路",
            shop: "王小虎夫妻店",
            shopId: "10333",
          },
          {
            id: "12987125",
            name: "好滋好味鸡蛋仔",
            category: "江浙小吃、小吃零食",
            desc: "荷兰优质淡奶，奶香浓而不腻",
            address: "上海市普陀区真北路",
            shop: "王小虎夫妻店",
            shopId: "10333",
          },
          {
            id: "12987126",
            name: "好滋好味鸡蛋仔",
            category: "江浙小吃、小吃零食",
            desc: "荷兰优质淡奶，奶香浓而不腻",
            address: "上海市普陀区真北路",
            shop: "王小虎夫妻店",
            shopId: "10333",
          },
        ],
        multipleSelection: [],
      };
    },
    methods: {},
  };
</script>

<style>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
显示代码 复制代码

# 树形数据与懒加载

支持树类型的数据的显示。当 row 中包含 children 字段时，被视为树形数据。渲染树形数据时，必须要指定 row-key。支持子节点数据异步加载。设置 pro-table 的 lazy 属性为 true 与加载函数 load 。通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点。children 与 hasChildren 都可以通过 tree-props 配置。

<template>
  <el-card>
    <pro-table
      :columns="columns"
      :data="dataSource"
      row-key="id"
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
    </pro-table>
    <pro-table
      :columns="columns"
      :data="tableData1"
      row-key="id"
      lazy
      :load="load"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
    </pro-table>
  </el-card>
</template>

<script>
  export default {
    data() {
      return {
        columns: [
          {
            label: "日期",
            name: "date",
            width: 200,
          },
          {
            label: "姓名",
            name: "name",
            width: 200,
          },
          {
            label: "地址",
            name: "address",
          },
        ],
        dataSource: [
          {
            id: 1,
            date: "2016-05-02",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
          },
          {
            id: 2,
            date: "2016-05-04",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1517 弄",
          },
          {
            id: 3,
            date: "2016-05-01",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1519 弄",
            children: [
              {
                id: 31,
                date: "2016-05-01",
                name: "王小虎",
                address: "上海市普陀区金沙江路 1519 弄",
              },
              {
                id: 32,
                date: "2016-05-01",
                name: "王小虎",
                address: "上海市普陀区金沙江路 1519 弄",
              },
            ],
          },
          {
            id: 4,
            date: "2016-05-03",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1516 弄",
          },
        ],
        tableData1: [
          {
            id: 1,
            date: "2016-05-02",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
          },
          {
            id: 2,
            date: "2016-05-04",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1517 弄",
          },
          {
            id: 3,
            date: "2016-05-01",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1519 弄",
            hasChildren: true,
          },
          {
            id: 4,
            date: "2016-05-03",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1516 弄",
          },
        ],
      };
    },
    methods: {
      load(tree, treeNode, resolve) {
        setTimeout(() => {
          resolve([
            {
              id: 31,
              date: "2016-05-01",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1519 弄",
            },
            {
              id: 32,
              date: "2016-05-01",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1519 弄",
            },
          ]);
        }, 1000);
      },
    },
  };
</script>

<style>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
显示代码 复制代码

# 自定义表头

通过设置 ${name}Header Scoped slot 来自定义表头。

<template>
  <el-card>
    <pro-table :columns="columns" :data="dataSource">
      <template #addressHeader="scope">
        <el-input size="mini" placeholder="输入关键字搜索" />
      </template>
    </pro-table>
  </el-card>
</template>

<script>
  export default {
    data() {
      return {
        columns: [
          {
            label: "日期",
            name: "date",
            width: 200,
          },
          {
            label: "姓名",
            name: "name",
            width: 200,
          },
          {
            label: "地址",
            name: "address",
          },
        ],
        dataSource: [
          {
            date: "2016-05-02",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
          },
          {
            date: "2016-05-04",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1517 弄",
          },
          {
            date: "2016-05-01",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1519 弄",
          },
          {
            date: "2016-05-03",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1516 弄",
          },
        ],
      };
    },
  };
</script>

<style lang="scss" scoped></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
显示代码 复制代码

# 自定义内容

通过设置 ${name} Scoped slot 来自定义内容。

<template>
  <el-card>
    <pro-table :columns="columns" :data="dataSource">
      <template #address="{row}">
        <el-input v-model="row.address" size="mini" placeholder="输入关键字搜索" />
      </template>
    </pro-table>
  </el-card>
</template>

<script>
  export default {
    data() {
      return {
        columns: [
          {
            label: "日期",
            name: "date",
            width: 200,
          },
          {
            label: "姓名",
            name: "name",
            width: 200,
          },
          {
            label: "地址",
            name: "address",
          },
        ],
        dataSource: [
          {
            date: "2016-05-02",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
          },
          {
            date: "2016-05-04",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1517 弄",
          },
          {
            date: "2016-05-01",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1519 弄",
          },
          {
            date: "2016-05-03",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1516 弄",
          },
        ],
      };
    },
  };
</script>

<style lang="scss" scoped></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
显示代码 复制代码

# 表尾合计行

将 show-summary 设置为 true 就会在表格尾部展示合计行。默认情况下，对于合计行，第一列不进行数据求合操作，而是显示「合计」二字（可通过 sum-text 配置），其余列会将本列所有数值进行求合操作，并显示出来。当然，你也可以定义自己的合计逻辑。通过 sumFilter 过滤方法处理自定义逻辑。

<template>
  <el-card>
    <pro-table :columns="columns" :data="dataSource" show-summary> </pro-table>
  </el-card>
</template>

<script>
  export default {
    data() {
      return {
        columns: [
          {
            label: "ID",
            name: "id",
            width: 200,
          },
          {
            label: "姓名",
            name: "name",
            width: 200,
          },
          {
            label: "数值1",
            name: "amount1",
            sumPrefix: "￥",
            sumSuffix: "元",
          },
          {
            label: "数值2",
            sumPrefix: "$",
            name: "amount2",
          },
          {
            label: "数值3",
            name: "amount3",
            sumFilter() {
              return "🧟‍♂️🧟‍♂️🧟‍♂️";
            },
          },
        ],
        dataSource: [
          {
            id: "12987122",
            name: "王小虎",
            amount1: "234",
            amount2: "3.2",
            amount3: 10,
          },
          {
            id: "12987123",
            name: "王小虎",
            amount1: "165",
            amount2: "4.43",
            amount3: 12,
          },
          {
            id: "12987124",
            name: "王小虎",
            amount1: "324",
            amount2: "1.9",
            amount3: 9,
          },
          {
            id: "12987125",
            name: "王小虎",
            amount1: "621",
            amount2: "2.2",
            amount3: 17,
          },
          {
            id: "12987126",
            name: "王小虎",
            amount1: "539",
            amount2: "4.1",
            amount3: 15,
          },
        ],
      };
    },
  };
</script>

<style lang="scss" scoped></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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
显示代码 复制代码

# 分页表格

共 1000 条
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 100
前往
页
1/10 
<template>
  <el-card>
    <pro-table
      :columns="columns"
      :data="dataSource"
      :total="total"
      :page="page"
      :limit="limit"
      @pagination="pagination"
    >
    </pro-table>
    {{page}}/{{limit}}
  </el-card>
</template>

<script>
  export default {
    data() {
      return {
        total: 1000,
        page: 1,
        limit: 10,
        columns: [
          {
            label: "ID",
            name: "id",
            width: 200,
          },
          {
            label: "姓名",
            name: "name",
            width: 200,
          },
          {
            label: "数值1",
            name: "amount1",
          },
          {
            label: "数值2",
            name: "amount2",
          },
          {
            label: "数值3",
            name: "amount3",
          },
        ],
        dataSource: [
          {
            id: "12987122",
            name: "王小虎",
            amount1: "234",
            amount2: "3.2",
            amount3: 10,
          },
          {
            id: "12987123",
            name: "王小虎",
            amount1: "165",
            amount2: "4.43",
            amount3: 12,
          },
          {
            id: "12987124",
            name: "王小虎",
            amount1: "324",
            amount2: "1.9",
            amount3: 9,
          },
          {
            id: "12987125",
            name: "王小虎",
            amount1: "621",
            amount2: "2.2",
            amount3: 17,
          },
          {
            id: "12987126",
            name: "王小虎",
            amount1: "539",
            amount2: "4.1",
            amount3: 15,
          },
        ],
      };
    },
    methods: {
      pagination(pagination) {
        this.page = pagination.page;
        this.limit = pagination.pageSize;
      },
    },
  };
</script>

<style lang="scss" scoped></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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
显示代码 复制代码

# 数据格式化

<template>
  <el-card>
    <pro-table :columns="columns" :data="dataSource"> </pro-table>
  </el-card>
</template>

<script>
  export default {
    data() {
      return {
        columns: [
          {
            label: "ID",
            name: "id",
            width: 100,
          },
          {
            label: "姓名",
            name: "name",
            width: 100,
          },
          {
            label: "执行时间",
            name: "useTime",
            format: "usetime",
            width: 100,
          },
          {
            label: "金额",
            name: "currency",
            format: "currency",
            width: 200,
          },
          {
            label: "日期",
            name: "datatime",
            format: "date",
            width: 100,
          },
          {
            label: "时间",
            name: "datatime",
            format: "time",
            width: 100,
          },
          {
            label: "日期时间",
            width: 200,
            name: "datatime",
            format: "dateTime",
          },
          {
            label: "描述",
            showOverflowTooltip: true,
            width: 200,
            name: "desc",
          },
          {
            label: "状态",
            name: "status",
            width: 200,
            dict: [
              {
                value: 0,
                type: "inactive",
                name: "关闭",
              },
              {
                value: 1,
                type: "active",
                name: "开启",
              },
            ],
            switch: {
              onChange: (scope) => {
                console.log(scope);
              },
            },
          },
          {
            label: "标签",
            name: "tag",
            width: 100,
            tag: {
              effect: "dark",
            },
            dict: [
              {
                value: 0,
                type: "success", //success/info/warning/danger
                name: "成功",
              },
              {
                value: 1,
                type: "info", //success/info/warning/danger
                name: "信息",
              },
              {
                value: 2,
                type: "warning", //success/info/warning/danger
                name: "提示",
              },
              {
                value: 3,
                type: "danger", //success/info/warning/danger
                name: "危险",
              },
            ],
          },
          {
            width: 200,
            label: "进度",
            name: "progress",
            progress: true,
          },
        ],
        dataSource: [
          {
            id: "12987122",
            name: "王小虎",
            useTime: 3432,
            currency: 2312312312,
            datatime: "20201112163445",
            status: 0,
            tag: 2,
            progress: 20,
            desc: "这是一段描述文字这是一段描述文字这是一段描述文字这是一段描述文字这是一段描述文字",
          },
          {
            id: "12987122",
            name: "王小虎",
            useTime: 5432,
            currency: 23312312,
            datatime: "20201112163445",
            status: 1,
            tag: 1,
            progress: 80,
            desc: "这是一段描述文字这是一段描述文字这是一段描述文字这是一段描述文字这是一段描述文字",
          },
          {
            id: "12987122",
            name: "王小虎",
            useTime: 532,
            currency: 23312312,
            datatime: "2020-11-12 16:35:44",
            status: 0,
            tag: 3,
            progress: 100,
            desc: "这是一段描述文字这是一段描述文字这是一段描述文字这是一段描述文字这是一段描述文字",
          },
        ],
      };
    },
    methods: {
      pagination(pagination) {
        this.page = pagination.page;
        this.limit = pagination.pageSize;
      },
    },
  };
</script>

<style lang="scss" scoped></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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
显示代码 复制代码

# 表格操作

<template>
  <el-card>
    <pro-table :columns="columns" :data="dataSource" :operation="operation"></pro-table>
  </el-card>
</template>

<script>
  export default {
    data() {
      return {
        columns: [
          {
            label: "日期",
            name: "date",
            width: 200,
          },
          {
            label: "姓名",
            name: "name",
            width: 200,
          },
          {
            label: "地址",
            name: "address",
          },
        ],
        dataSource: [
          {
            date: "2016-05-02",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
          },
          {
            date: "2016-05-04",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1517 弄",
          },
          {
            date: "2016-05-01",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1519 弄",
          },
          {
            date: "2016-05-03",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1516 弄",
          },
        ],
        operation: {
          props: { width: 120, fixed: "right" },
          list: [
            {
              text: "查看",
              onClick: () => {
                console.log("查看");
              },
            },
            {
              text: "删除",
              popconfirm: {
                title: "确认删除?",
              },
              onClick: () => {
                console.log("删除");
              },
            },
            {
              text: "修改",
              onClick: () => {
                console.log("修改");
              },
            },
          ],
        },
      };
    },
  };
</script>

<style lang="scss" scoped></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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
显示代码 复制代码

# API

# ProTable Attributes

参数 说明 类型 可选值 默认值
data 显示的数据 array — —
height Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则这个高度会设置为 Table 的 style.height 的值，Table 的高度会受控于外部样式。 string/number — —
max-height Table 的最大高度。合法的值为数字或者单位为 px 的高度。 string/number — —
stripe 是否为斑马纹 table boolean — true
border 是否带有纵向边框 boolean — false
size Table 的尺寸 string medium / small / mini small
fit 列的宽度是否自撑开 boolean — true
show-header 是否显示表头 boolean — true
highlight-current-row 是否要高亮当前行 boolean — false
current-row-key 当前行的 key，只写属性 String,Number — —
row-class-name 行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。 Function({row, rowIndex})/String — —
row-style 行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。 Function({row, rowIndex})/Object — —
cell-class-name 单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className。 Function({row, column, rowIndex, columnIndex})/String — —
cell-style 单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。 Function({row, column, rowIndex, columnIndex})/Object — —
header-row-class-name 表头行的 className 的回调方法，也可以使用字符串为所有表头行设置一个固定的 className。 Function({row, rowIndex})/String — —
header-row-style 表头行的 style 的回调方法，也可以使用一个固定的 Object 为所有表头行设置一样的 Style。 Function({row, rowIndex})/Object — —
header-cell-class-name 表头单元格的 className 的回调方法，也可以使用字符串为所有表头单元格设置一个固定的 className。 Function({row, column, rowIndex, columnIndex})/String — —
header-cell-style 表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。 Function({row, column, rowIndex, columnIndex})/Object — —
row-key 行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。 Function(row)/String — —
empty-text 空数据时显示的文本内容，也可以通过 slot="empty" 设置 String — 暂无数据
default-expand-all 是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效 Boolean — false
expand-row-keys 可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。 Array —
default-sort 默认的排序列的 prop 和顺序。它的 prop 属性指定默认的排序的列，order 指定默认排序的顺序 Object order: ascending, descending 如果只指定了 prop, 没有指定 order, 则默认顺序是 ascending
tooltip-effect tooltip effect 属性 String dark/light
show-summary 是否在表尾显示合计行 Boolean — false
sum-text 合计行第一列的文本 String — 合计
summary-method 自定义的合计计算方法 Function({ columns, data }) — —
span-method 合并行或列的计算方法 Function({ row, column, rowIndex, columnIndex }) — —
select-on-indeterminate 在多选表格中，当仅有部分行被选中时，点击表头的多选框时的行为。若为 true，则选中所有行；若为 false，则取消选择所有行 Boolean — true
indent 展示树形数据时，树节点的缩进 Number — 16
lazy 是否懒加载子节点数据 Boolean — —
load 加载子节点数据的函数，lazy 为 true 时生效，函数第二个参数包含了节点的层级信息 Function(row, treeNode, resolve) — —
tree-props 渲染嵌套数据的配置选项 Object — { hasChildren: 'hasChildren', children: 'children' }
header-nested 嵌套表头设置 Array - -
total 总条目数 number — —
page 当前页数，支持 .sync 修饰符 number — 1
limit 每页显示条目个数，支持 .sync 修饰符 number — 10
layout 组件布局，子组件名用逗号分隔 String sizes, prev, pager, next, jumper, ->, total, slot total, sizes, prev, pager, next, jumper
pageSizes 每页显示个数选择器的选项设置 number[] — [10, 20, 30, 40, 50]
background 是否为分页按钮添加背景色 boolean — true
autoScroll 触发分页事件后是否自动滚动到顶部 boolean - false
operation 操作按钮配置 operation - -
selection 是否展示多选 boolean - false
columns 列表列属性配置 columns[] - -
sumNaNText 计算值为 NaN 时，显示文本 string - N/A

# Operation Attributes

参数 说明 类型 可选值 默认值
props 操作列属性配置 参考Table-column Attributes (opens new window) 注：属性需要驼峰名称规范 object - -
list 操作按钮组; popconfirm 属性参考Popconfirm Attributes (opens new window) {text:string,onClick:Function(callback:Funtion({ row, column, $index }), popconfirm: object} - -

# Columns Attributes

TIP

Column 属性继承 Table-column Attributes；更多属性可以参考Table-column Attributes (opens new window)

参数 说明 类型 可选值 默认值
label 表头名称 string - -
name 数据源属性名称 string - -
emptyText 数据为空时显示字段 string - -
defaultValue 默认值 any - -
format 数据格式化 string usetime|
currency|
progress|
date|
dateTime|
time		 -
switch 是否使用 switch 组件; 如果是 object 参考switch (opens new window) boolean| object - -
tag 是否使用 tag 组件; 如果是 object 参考tag (opens new window);如果是 function 则回调返回值就是 tag 属性。返回值参考tag (opens new window) boolean|
object|
Function(callback:Funtion({ row, column, $index })		 - -
progress 是否使用 progress 组件，如果是 function 则回调返回值就是 progress 属性。返回值参考progress (opens new window) boolean|
Function(callback:Funtion({ row, column, $index })		 - -
dict 字典数据,映射数据。1. 如果 dict 和 switch 属性同时存在 则字典值为 0 就是非激活状态的值，字典值为 1 就是激活状态值；也可以通过 type 值来指定激活状态的 value 和 text，当 type 为 active 则是激活状态的 value 和 text，type 为 inactive 为非激活状态 2. 当 dict 和 tag 同时存在，设置 type 即是 tag type 属性值 Array - -
sum 是否计算当前 column 总和 设置 show-summary 时生效 boolean - true
sumFilter 对计算结果进行处理 Funtion(sum, { column, data }) - -

# ProTable Events

TIP

参考Table Events (opens new window)

# ProTable Methods

TIP

参考Table Methods (opens new window)

# ProTable Scoped Slot

TIP

插槽名称规范：${name} name 值即是 columns 配置的 name 值； 如果想要自定义数据展示方式或者操作，可以通过 Slot name 为${name} 来自定义对应内容 如果想要自定义表头内容可以通过 Slot name 为 ${name}Header 来自定义内容；注意 Header 是固定字符串，表示是修改对应列表头

name 说明
${name} 自定义列的内容，参数为 { row, column, $index }
${name}Header 自定义表头的内容. 参数为 { column, $index }

← 查询表格组件 →