Yb-components
  • 组件
  • 数据展示
liaoyingmin
2023-02-01

YbCardList 卡片列表

卡片列表组件

# 基本使用

BY01
姓名老王
诊疗信息
2025
诊疗信息.组织机构代码1后面还有很多数据后面还有很多数据后面还有很多数据
BY02
姓名老李
2025
BY03
姓名老王
诊疗信息
2025
诊疗信息.组织机构代码3
BY04
姓名老王
诊疗信息
2025
诊疗信息.组织机构代码4
BY05
姓名老王
诊疗信息
2025
诊疗信息.组织机构代码5
BY06
姓名老王
诊疗信息
2025
诊疗信息.组织机构代码6
<template>
    <div>
        <yb-card-list
            :columns="columns"
            :data="tableData"
            size="small"
            :cardProps="{'body-style':{height:'225px'}}"
            :select-on-indeterminate="selectOnIndeterminate"
            @row-click="handleRowClick"
            @row-contextmenu="handleRowContextmenu"
            @row-dblclick="handleRowDblclick"
        >
            <template v-slot:medicalRecordNumber="cardData">
                <span :style="{fontSize: '20px',fontWeight: 'bold'}">
                    {{cardData.row.medicalRecordNumber}}
                </span>
            </template>
            <template v-slot:buttons="cardData">
                <span>
                    <el-button
                        @click="toViewer(cardData.row)"
                        type="default"
                        size="mini"
                        >查看</el-button
                    >
                    <el-button type="primary" size="mini">修改</el-button>
                    <el-button type="danger" size="mini">删除</el-button>
                </span>
            </template>
        </yb-card-list>
    </div>
</template>
<script>
    export default {
        data() {
            const tableData = JSON.parse(
                `[{"fieldName":"诊疗信息.组织机构代码1后面还有很多数据后面还有很多数据后面还有很多数据","medicalRecordNumber":"BY01","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"","medicalRecordNumber":"BY02","patientName":"老李","projectTypeName":""},{"fieldName":"诊疗信息.组织机构代码3","medicalRecordNumber":"BY03","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码4","medicalRecordNumber":"BY04","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码5","medicalRecordNumber":"BY05","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码6","medicalRecordNumber":"BY06","patientName":"老王","projectTypeName":"诊疗信息"}]`
            ).map((item, i) => ({ ...item, id: i + 1 }));
            return {
                selectOnIndeterminate: true,
                columns: [
                    {
                        label: '病案号',
                        prop: 'medicalRecordNumber',
                        excludeSpans: true,
                        fixed: 'top',
                    },
                    {
                        label: '姓名',
                        prop: 'patientName',
                        spans: { span: 12 },
                        'render-label': function (h, { column }) {
                            return (
                                <span>
                                    <i class="el-icon-s-help"></i>
                                    {column.label}
                                </span>
                            );
                        },
                    },
                    {
                        label: '信息分类',
                        property: 'projectTypeName',
                        width: '150px',
                        spans: { span: 12 },
                        'label-hidden': true,
                    },
                    {
                        label: '年份',
                        prop: 'fieldName',
                        formatter(row, column, cellValue) {
                            return new Date().getFullYear();
                        },
                        'label-hidden': true,
                    },
                    {
                        label: '字段',
                        prop: 'fieldName',
                        'show-overflow-tooltip': true,
                        'label-hidden': true,
                    },
                    {
                        label: '操作',
                        prop: 'buttons',
                        align: 'right',
                        excludeSpans: true,
                    },
                ],
                tableData,
            };
        },
        methods: {
            toViewer(row) {
                console.log(row);
            },
            handleRowClick(row, column, event) {
                console.log('handleRowClick', row, column, event);
            },
            handleRowDblclick(row, column, event) {
                console.log('handleRowDblclick', row, column, event);
            },
            handleRowContextmenu(row, column, event) {
                console.log('handleRowContextmenu', row, column, event);
            },
        },
    };
</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
显示 复制

# 多选

hidden-select-all
1
BY01
姓名老王
诊疗信息
字段诊疗信息.组织机构代码1后面还有很多数据后面还有很多数据后面还有很多数据
2
BY02
姓名老李
诊疗信息
字段
3
BY03
姓名老王
诊疗信息
字段诊疗信息.组织机构代码3
4
BY04
姓名老王
诊疗信息
字段诊疗信息.组织机构代码4
5
BY05
姓名老王
诊疗信息
字段诊疗信息.组织机构代码5
6
BY06
姓名老王
诊疗信息
字段诊疗信息.组织机构代码6
<template>
    <div>
        <div :style="{marginBottom: '10px'}">
            hidden-select-all <el-switch v-model="hiddenSelectAll" />
            <el-button @click="toggleSelection">反选</el-button>
            <el-button @click="toggleRow">反选第二条数据</el-button>
            <el-button @click="clearSelection">清空选项</el-button>
            <el-button @click="getSelection">获取选中数据</el-button>
        </div>
        <yb-card-list
            ref="ybCardList"
            :columns="columns"
            :data="tableData"
            size="small"
            :select-on-indeterminate="selectOnIndeterminate"
            @selection-change="handleSelectionChange"
            @select-all="handleSelectionAll"
            @select="handleSelection"
            :hidden-select-all="hiddenSelectAll"
        >
            <!-- <template v-slot:index-serit="cardData">
                {{ cardData.column.index(cardData.$index) }}
            </template> -->
            <template v-slot:medicalRecordNumber="cardData">
                <span
                    :style="{fontSize: '20px',fontWeight: 'bold',margin:'0 0 10px 0'}"
                >
                    {{cardData.row.medicalRecordNumber}}
                </span>
            </template>
        </yb-card-list>
    </div>
</template>
<script>
    export default {
        data() {
            const tableData = JSON.parse(
                `[{"fieldName":"诊疗信息.组织机构代码1后面还有很多数据后面还有很多数据后面还有很多数据","medicalRecordNumber":"BY01","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"","medicalRecordNumber":"BY02","patientName":"老李","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码3","medicalRecordNumber":"BY03","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码4","medicalRecordNumber":"BY04","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码5","medicalRecordNumber":"BY05","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码6","medicalRecordNumber":"BY06","patientName":"老王","projectTypeName":"诊疗信息"}]`
            ).map((item, i) => ({ ...item, id: i + 1 }));
            return {
                hiddenSelectAll: true,
                selectOnIndeterminate: true,
                columns: [
                    {
                        type: 'index',
                        prop: 'index-serit',
                        index: (i) => {
                            return i + 1;
                        },
                    },
                    {
                        type: 'selection',
                        selectable(row, index) {
                            return index !== 0;
                        },
                    },
                    {
                        label: '病案号',
                        prop: 'medicalRecordNumber',
                    },
                    {
                        label: '姓名',
                        prop: 'patientName',
                        spans: { span: 12 },
                        'render-label': function (h, { column }) {
                            return (
                                <span>
                                    <i class="el-icon-s-help"></i>
                                    {column.label}
                                </span>
                            );
                        },
                    },
                    {
                        label: '信息分类',
                        property: 'projectTypeName',
                        spans: { span: 12 },
                        'label-hidden': true,
                    },
                    {
                        label: '字段',
                        prop: 'fieldName',
                        'show-overflow-tooltip': true,
                    },
                ],
                tableData,
            };
        },
        methods: {
            handleSelectionChange(val) {
                console.log('handleSelectionChange', val);
            },
            toggleSelection() {
                this.$refs['ybCardList'].toggleAllSelection();
            },
            clearSelection() {
                this.$refs['ybCardList'].clearSelection();
            },
            handleSelectionAll() {
                console.log('handleSelectionAll');
            },
            handleSelection() {
                console.log('handleSelection');
            },
            toggleRow() {
                this.$refs['ybCardList'].toggleRowSelection(this.tableData[1]);
            },
            getSelection() {
                this.$alert(this.$refs['ybCardList'].store.states.selection);
            },
        },
    };
</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
显示 复制

# 插槽的使用

  • 单独某个 formItem 的插槽名称：columns[].prop，参数 { row, column, $index }
  • 单独的卡片内容的插槽名称：data[].slot，参数 { row, $index }
  • 数据为空的插槽名称：empty
  • 若存在 data[].nonSelectable 值为 true，代表该卡片不可以被选择，但可监听点击事件
BY01
老王
BY02
老李
BY03
老王
BY04
老王
BY05
老王
+ 新增 
<template>
    <div>
        <yb-card-list
            :columns="columns"
            :data="tableData"
            size="small"
            :cardProps="{'body-style':{height:'120px'}}"
            :select-on-indeterminate="selectOnIndeterminate"
            @row-click="handleRowClick"
            @row-contextmenu="handleRowContextmenu"
            @row-dblclick="handleRowDblclick"
            :hidden-select-all="true"
        >
            <template v-slot:medicalRecordNumber,patientName="cardData">
                <span :style="{fontSize: '20px',fontWeight: 'bold'}">
                    {{cardData.row[cardData.column.prop]}}
                </span>
            </template>
            <template v-slot:Add="cardData">
                <div
                    style="display: flex;align-items: center;justify-content: center;height: 100%;"
                >
                    + 新增
                </div>
            </template>
        </yb-card-list>
    </div>
</template>
<script>
    export default {
        data() {
            const tableData = JSON.parse(
                `[{"fieldName":"诊疗信息.组织机构代码1后面还有很多数据后面还有很多数据后面还有很多数据","medicalRecordNumber":"BY01","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"","medicalRecordNumber":"BY02","patientName":"老李","projectTypeName":""},{"fieldName":"诊疗信息.组织机构代码3","medicalRecordNumber":"BY03","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码4","medicalRecordNumber":"BY04","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码5","medicalRecordNumber":"BY05","patientName":"老王","projectTypeName":"诊疗信息"},{"fieldName":"诊疗信息.组织机构代码6","medicalRecordNumber":"BY06","patientName":"老王","projectTypeName":"诊疗信息","slot":"Add","nonSelectable":true}]`
            ).map((item, i) => ({ ...item, id: i + 1 }));
            return {
                selectOnIndeterminate: true,
                columns: [
                    {
                        label: '病案号',
                        prop: 'medicalRecordNumber',
                        excludeSpans: true,
                        fixed: 'top',
                    },
                    {
                        type: 'selection',
                        selectable(row, index) {
                            return index !== 0;
                        },
                    },
                    {
                        label: '姓名',
                        prop: 'patientName',
                        spans: { span: 12 },
                        'render-label': function (h, { column }) {
                            return (
                                <span>
                                    <i class="el-icon-s-help"></i>
                                    {column.label}
                                </span>
                            );
                        },
                    },
                ],
                tableData,
            };
        },
        methods: {
            toViewer(row) {
                console.log(row);
            },
            handleRowClick(row, column, event) {
                console.log('handleRowClick', row, column, event);
            },
            handleRowDblclick(row, column, event) {
                console.log('handleRowDblclick', row, column, event);
            },
            handleRowContextmenu(row, column, event) {
                console.log('handleRowContextmenu', row, column, event);
            },
        },
    };
</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
显示 复制

# YbCardList Attributes

参数 说明 类型 可选值 默认值
data 显示数据 array -- []
columns 生成多个 YbCardList Column 数据 array<YbCardList Column> -- []
size 内容间隔大小 string 'medium' | 'small' | 'mini' 'small'
spans 卡片栅格布局，与el-col (opens new window)配置一致 object - { span: 6 }
cardProps 卡片属性配置，与el-card (opens new window)配置一致 object - --
row-key 行数据的 Key，用来优化渲染；类型为 string 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。 function(row) | string - --
select-on-indeterminate 在多选表格中，当仅有部分行被选中时，点击表头的多选框时的行为。若为 true，则选中所有行；若为 false，则取消选择所有行。 boolean - true
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 - --
empty-text 空数据时显示的文本内容，也可以通过 slot="empty" 设置 string - 暂无数据
row-height 卡片的高度，优先级高于 row-style 设置的高度 number - --
hidden-select-all 是否隐藏全选 checkBox boolean - false

# YbCardList Column Attributes

参数 说明 类型 可选值 默认值
type 对应列的类型。如果设置了 selection 则显示多选框；如果设置了 index 则显示该行的索引（从 1 开始计算） string 'selection' | 'index' --
selectable 仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一卡片是否可以勾选 function(row, index) -- --
index 如果设置了 type=index，可以通过传递 index 属性来自定义索引 number, Function(index) -- --
label 显示的标题 string -- --
prop 生成多个卡片数对应列内容的字段名，也可以使用 property 属性 string -- --
formatter 格式化内容 function(row, column, cellValue, index) -- --
spans 栅格布局，与el-col (opens new window)配置一致 object -- {span:24}
align 对齐方式 string 'left' | 'center' | 'right' 'left'
render-label Label 区域渲染使用的 Function function(h, { column, $index }) -- --
label-hidden 是否隐藏显示的标题 boolean -- false
hidden 是否隐藏该字段 label 与 prop 的值。优先级大于插槽，当值为 true 时，插槽不显示 boolean -- false
show-overflow-tooltip 当内容过长被隐藏时显示 tooltip boolean -- false
excludeSpans 是否不包含在 spans boolean -- false
fixed 位置，仅对 excludeSpans=true 有效 string 'top' | 'bottom' 'bottom'

# YbCardList Methods

方法名称 说明 回调参数
clearSelection 用于多选，清空用户的选择 --
toggleRowSelection 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中） row, selected
toggleAllSelection 用于多选表格，切换所有行的选中状态 --

# YbCardList Events

事件名称 说明 回调参数
select 当用户手动勾选数据行的 Checkbox 时触发的事件 selection, row
select-all 当用户手动勾选全选 Checkbox 时触发的事件 selection
selection-change 当选择项发生变化时会触发该事件 selection
row-click 当某一行被点击时会触发该事件 row, column, event
row-contextmenu 当某一行被鼠标右键点击时会触发该事件 row, column, event
row-dblclick 当某一行被双击时会触发该事件 row, column, event

# YbCardList Scoped Slot

name 说明
columns[].prop 所有列单元格的均为插槽名称，参数为 { row, column, $index }
empty --
data[].slot slot 字段值为插槽名称，参数为 { row, $index }
上次更新: 2023/08/11, 18:16:01
YbTable 表格
YbTree 树

← YbTree 树→

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