Yb-components
  • 组件
  • 数据展示
zougt
2021-09-27

YbTable 表格

对 el-table (opens new window)的二次封装，将el-table-column处理成数据结构方式 columns，不仅支持el-table的所有功能，也会扩展一些功能，在使用上更加简捷。

# 基本使用

<template>
    <yb-table :columns="columns" :data="tableData">
        <template v-slot:index-serit="table">
            <el-tag size="mini" type="info"
                >{{ table.column.index(table.$index) }}</el-tag
            >
        </template>

        <template v-slot:buttons="table">
            <el-button @click="toViewer(table.row)" type="default" size="mini"
                >查看</el-button
            >
            <el-button type="primary" size="mini">修改</el-button>
            <el-button type="danger" size="mini">删除</el-button>
        </template>
    </yb-table>
</template>
<script>
    export default {
        data() {
            const tableData = JSON.parse(
                `[{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY04","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY04","patientName":"老李","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY04","patientName":"姓名","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY04","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY04","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY04","patientName":"老王","projectTypeName":"诊疗信息"}]`
            ).map((item, i) => ({ ...item, id: i + 1 }));
            return {
                columns: [
                    {
                        type: 'index',
                        label: '序号',
                        prop: 'index-serit',
                        fixed: 'left',
                        width: '58px',
                        index: (i) => {
                            return i + 1;
                        },
                    },
                    {
                        type: 'selection',
                        prop: 'selection-column',
                        width: '40px',
                    },
                    {
                        label: '病案号',
                        prop: 'medicalRecordNumber',
                        'show-overflow-tooltip': true,
                        width: '120px',
                    },
                    {
                        label: '姓名',
                        prop: 'patientName',
                        width: '60px',
                    },
                    {
                        label: '信息分类',
                        prop: 'projectTypeName',
                        width: '80px',
                    },
                    {
                        label: '字段',
                        prop: 'fieldName',
                        formatter(row, column, cellValue) {
                            return (cellValue || '').replace(
                                /[^.]+\.(?=[^.]+)/g,
                                ''
                            );
                        },
                    },
                    {
                        label: '操作',
                        prop: 'buttons',
                    },
                ],
                tableData,
            };
        },
        methods: {
            toViewer(row) {},
        },
    };
</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
75
76
77
78
79
显示 复制

# 多行表头

<template>
    <yb-table :columns="columns" :data="tableData">
        <template v-slot:index-serit="table">
            <el-tag size="mini" type="info"
                >{{ table.column.index(table.$index) }}</el-tag
            >
        </template>

        <template v-slot:buttons="table">
            <el-button @click="toViewer(table.row)" type="default" size="mini"
                >查看</el-button
            >
            <el-button type="primary" size="mini">修改</el-button>
            <el-button type="danger" size="mini">删除</el-button>
        </template>
    </yb-table>
</template>
<script>
    export default {
        data() {
            const tableData = JSON.parse(
                `[{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY04","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY04","patientName":"老李","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY04","patientName":"姓名","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY04","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY04","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY04","patientName":"老王","projectTypeName":"诊疗信息"}]`
            ).map((item, i) => ({ ...item, id: i + 1 }));
            return {
                columns: [
                    {
                        type: 'index',
                        label: '序号',
                        prop: 'index-serit',
                        fixed: 'left',
                        width: '58px',
                        index: (i) => {
                            return i + 1;
                        },
                    },
                    {
                        label: '组合',
                        prop: 'medicalGroup',
                        children: [
                            {
                                label: '病案号',
                                prop: 'medicalRecordNumber',
                                'show-overflow-tooltip': true,
                                width: '120px',
                            },
                            {
                                label: '姓名',
                                prop: 'patientName',
                                width: '60px',
                            },
                        ],
                    },
                    {
                        label: '信息分类',
                        prop: 'projectTypeName',
                        width: '80px',
                    },
                    {
                        label: '字段',
                        prop: 'fieldName',
                        formatter(row, column, cellValue) {
                            return (cellValue || '').replace(
                                /[^.]+\.(?=[^.]+)/g,
                                ''
                            );
                        },
                    },
                    {
                        label: '操作',
                        prop: 'buttons',
                    },
                ],
                tableData,
            };
        },
        methods: {
            toViewer(row) {},
        },
    };
</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
75
76
77
78
79
80
显示 复制

# getOptionsToFormat 的使用

<template>
    <yb-table :columns="columns" :data="tableData">
        <template v-slot:index-serit="table">
            <el-tag size="mini" type="info"
                >{{ table.column.index(table.$index) }}</el-tag
            >
        </template>

        <template v-slot:buttons="table">
            <el-button @click="toViewer(table.row)" type="default" size="mini"
                >查看</el-button
            >
            <el-button type="primary" size="mini">修改</el-button>
            <el-button type="danger" size="mini">删除</el-button>
        </template>
    </yb-table>
</template>
<script>
    export default {
        data() {
            const tableData = JSON.parse(
                `[{"sex":1,"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY04","patientName":"老王","projectTypeName":"诊疗信息"},{"sex":0,"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY04","patientName":"老李","projectTypeName":"诊疗信息"},{"sex":0,"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY04","patientName":"姓名","projectTypeName":"诊疗信息"},{"sex":1,"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY04","patientName":"老王","projectTypeName":"诊疗信息"},{"sex":0,"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY04","patientName":"老王","projectTypeName":"诊疗信息"},{"sex":1,"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY04","patientName":"老王","projectTypeName":"诊疗信息"}]`
            ).map((item, i) => ({ ...item, id: i + 1 }));
            return {
                columns: [
                    {
                        type: 'index',
                        label: '序号',
                        prop: 'index-serit',
                        fixed: 'left',
                        width: '58px',
                        index: (i) => {
                            return i + 1;
                        },
                    },
                    {
                        label: '病案号',
                        prop: 'medicalRecordNumber',
                        'show-overflow-tooltip': true,
                        width: '120px',
                    },
                    {
                        label: '姓名',
                        prop: 'patientName',
                        width: '60px',
                    },
                    {
                        label: '性别',
                        prop: 'sex',
                        width: '50px',
                        // formatter(row, column, cellValue, index, optionMaps) {
                        //     return optionMaps[column.property][cellValue];
                        // },
                        // 在不提供 formatter 时，效果同上面注释的 formatter 相同
                        getOptionsToFormat({ column }) {
                            // 同步、异步都支持
                            // return { 1: '男', 0: '女' }
                            return Promise.resolve({ 1: '男', 0: '女' });
                        },
                    },
                    {
                        label: '信息分类',
                        prop: 'projectTypeName',
                        width: '80px',
                    },
                    {
                        label: '字段',
                        prop: 'fieldName',
                        formatter(row, column, cellValue) {
                            return (cellValue || '').replace(
                                /[^.]+\.(?=[^.]+)/g,
                                ''
                            );
                        },
                    },
                    {
                        label: '操作',
                        prop: 'buttons',
                    },
                ],
                tableData,
            };
        },
        methods: {
            toViewer(row) {},
        },
    };
</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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
显示 复制

# 其他属性的演示

更多案例请查看 el-table (opens new window)

其他属性

size
stripe
horBorder
border
show-header
highlight-current-row
current-row-key

表格

<template>
    <el-row>
        <el-col :span="10">
            <h2>其他属性</h2>

            <div style="margin-bottom:20px">
                size
                <el-radio-group v-model="formProps['size']" size="mini">
                    <el-radio-button label="medium">medium</el-radio-button>
                    <el-radio-button label="small">small</el-radio-button>
                    <el-radio-button label="mini">mini</el-radio-button>
                </el-radio-group>
            </div>
            <div style="margin-bottom:20px">
                stripe
                <el-switch v-model="formProps['stripe']"></el-switch>
            </div>
            <div style="margin-bottom:20px" v-show="formProps['stripe']">
                horBorder
                <el-switch v-model="formProps['horBorder']"></el-switch>
            </div>
            <div style="margin-bottom:20px">
                border
                <el-switch v-model="formProps['border']"></el-switch>
            </div>
            <div style="margin-bottom:20px">
                show-header
                <el-switch v-model="formProps['show-header']"></el-switch>
            </div>
            <div style="margin-bottom:20px">
                highlight-current-row
                <el-switch
                    v-model="formProps['highlight-current-row']"
                ></el-switch>
            </div>
            <div style="margin-bottom:20px">
                current-row-key
                <el-radio-group
                    v-model="formProps['current-row-key']"
                    size="mini"
                >
                    <el-radio v-for="rowid in rowkeys" :label="rowid"
                        >{{rowid}}</el-radio
                    >
                </el-radio-group>
            </div>
        </el-col>
        <el-col :span="12">
            <h2>表格</h2>
            <yb-table
                ref="table"
                :columns="columns"
                :data="tableData"
                :size="formProps.size"
                :stripe="formProps.stripe"
                :horBorder="formProps.horBorder"
                :border="formProps.border"
                :show-header="formProps['show-header']"
                :highlight-current-row="formProps['highlight-current-row']"
                :current-row-key="formProps['current-row-key']"
            >
                <template v-slot:index-serit="table">
                    <el-tag size="mini" type="info"
                        >{{ table.column.index(table.$index) }}</el-tag
                    >
                </template>
            </yb-table>
        </el-col>
    </el-row>
</template>
<script>
    export default {
        data() {
            const tableData = JSON.parse(
                `[{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY04","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY04","patientName":"老李","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY04","patientName":"姓名","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY04","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY04","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY04","patientName":"老王","projectTypeName":"诊疗信息"}]`
            ).map((item, i) => ({ ...item, id: i + 1 }));
            return {
                columns: [
                    {
                        type: 'index',
                        label: '序号',
                        prop: 'index-serit',
                        width: '58px',
                        index: (i) => {
                            return i + 1;
                        },
                    },
                    {
                        label: '病案号',
                        prop: 'medicalRecordNumber',
                        'show-overflow-tooltip': true,
                    },
                    {
                        label: '姓名',
                        prop: 'patientName',
                        width: '60px',
                    },
                    {
                        label: '信息分类',
                        prop: 'projectTypeName',
                        width: '80px',
                    },
                    {
                        label: '字段',
                        prop: 'fieldName',
                        formatter(row, column, cellValue) {
                            return (cellValue || '').replace(
                                /[^.]+\.(?=[^.]+)/g,
                                ''
                            );
                        },
                        'show-overflow-tooltip': true,
                    },
                ],
                tableData,
                rowkeys: tableData.map((item) => item.id),
                formProps: {
                    size: 'small',
                    stripe: false,
                    horBorder: false,
                    border: false,
                    'show-header': true,
                    'highlight-current-row': false,
                    'current-row-key': null,
                },
            };
        },
    };
</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
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
显示 复制

# 插槽的使用

  • 所有列头部的插槽名称是: "columnHeaders"
  • 单列的头部的插槽名称是: columns[].prop+"-header"
  • 所有列单元格的插槽名称是: "columnCells" ， 单元格数据应该是 table.row[table.column.property]
  • 单列的单元格的插槽名称是: columns[].prop ， 单元格数据应该是 table.row[table.column.property]
<template>
    <yb-table :columns="columns" :data="tableData">
        <!-- 所有列头部的插槽，插槽名称是"columnHeaders"-->
        <template v-slot:columnHeaders="table">
            <i class="el-icon-s-help"></i>{{ table.column.label }}
        </template>
        <!-- 单列的头部的插槽，插槽名称对应prop加上"-header"-->
        <template v-slot:patientName-header="table">
            <el-tag size="mini" type="info">{{ table.column.label }}</el-tag>
        </template>
        <!-- 所有列单元格的插槽，插槽名称是"columnCells" ， 单元格数据应该是 table.row[table.column.property]-->
        <template v-slot:columnCells="table">
            <i class="el-icon-picture-outline-round"></i>{{
            table.row[table.column.property] }}
        </template>
        <!-- 单列的单元格的插槽，插槽名称对应prop ， 单元格数据应该是 table.row[table.column.property]-->
        <template v-slot:patientName="table">
            <el-tag size="mini" type="success"
                >{{ table.row[table.column.property] }}</el-tag
            >
        </template>
        <template v-slot:index-serit="table">
            <el-tag size="mini" type="info"
                >{{consoleLog(table)}}{{ table.column.index(table.$index)
                }}</el-tag
            >
        </template>
    </yb-table>
</template>
<script>
    export default {
        data() {
            const tableData = JSON.parse(
                `[{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY04","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY04","patientName":"老李","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY04","patientName":"姓名","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY04","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY04","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码","medicalRecordNumber":"BY04","patientName":"老王","projectTypeName":"诊疗信息"}]`
            ).map((item, i) => ({ ...item, id: i + 1 }));
            return {
                columns: [
                    {
                        type: 'index',
                        label: '序号',
                        prop: 'index-serit',
                        fixed: 'left',
                        width: '68px',
                        index: (i) => {
                            return i + 1;
                        },
                    },
                    {
                        label: '病案号',
                        prop: 'medicalRecordNumber',
                        'show-overflow-tooltip': true,
                        width: '120px',
                    },
                    {
                        label: '姓名',
                        prop: 'patientName',
                    },
                    {
                        label: '信息分类',
                        prop: 'projectTypeName',

                        'show-overflow-tooltip': true,
                    },
                    {
                        label: '字段',
                        prop: 'fieldName',
                        'show-overflow-tooltip': true,
                    },
                ],
                tableData,
            };
        },
        methods: {
            toViewer(row) {},
            consoleLog(table) {
                console.log(table, '---table slot');
            },
        },
    };
</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
75
76
77
78
79
80
显示 复制

# Props

参数 说明 类型 可选值 默认值
columns 生成多个el-table-column (opens new window)的数据，每一项的属性对应el-table-column的属性 object[] - []
columns[].children 用于多级表头的实现，父级也需要 columns[].key 或者 columns[].prop 作为渲染 key -- -- --
columns[].formatter 在 el-table-column 的 formatter 基础上增加了 optionMap 参数 function(row, column, cellValue, index,optionMaps){return } -- --
columns[].getOptionsToFormat 用于同步或者异步获取此列的 value 转 label 显示的对象数据，在不提供 columns[].formatter 时，会自动 value 转 label 显示， 同时在 columns[].formatter 提供 optionMaps 参数 function({column}){return Promise.resolve({})} -- --
showHeaderBg 是否显示头部背景 boolean -- true
fixedHeaderBg 是否固定头部背景色，就不会跟随主题色梯度变化 boolean -- true
horBorder 是否显示横向边框景 boolean -- true
maxCalcWidth 表格默认会计算数据文本的宽度作为列的最小宽度， 有些文本很长，可以用 maxCalcWidth 限制计˝算的宽度 number -- 300
columnTypeSlotsExclude 可以选择对 selection、index、expand 类型的列不使用单元格插槽 array -- ['selection']
... 其他属性同 el-table (opens new window) -- -- --

# Table Methods

方法调用方式应该是 this.$refs['table']['methodName']()

方法名称 说明 参数 返回值
getTable 取得 el-table 的组件实例 - -

调用el-table Methods (opens new window)的方法，调用方式应该是 this.$refs['table'].getTable()['methodName']()

// 例如
this.$refs['table'].getTable().clearSelection();
1
2

# Table Events

事件是同 el-table Events (opens new window)一致的

上次更新: 2025/01/21, 14:27:00
更新日志
YbCardList 卡片列表

← YbCardList 卡片列表→

Theme by Vdoing | Copyright © 2021-2025 YB-GZ | MIT License