vol开发文档

#

具体功能见示例：http://pro.volcore.xyz/#/table (opens new window)
为了方便开发快速上手,示例默认都使用的vue2语法编写,自己也可配置为vue3语法,变动很小

# 基础表格

功能: 自动绑定数据源，行点击事件 An image

查看代码(内容较多，按需配置即可) 
<template>
    <div class="table-item">
        <div class="table-item-header">
            <div class="table-item-border"></div> <span class="table-item-text">基础表格</span>
            <div class="small-text">
             功能:  自动绑定数据源，行点击事件
            </div>
            <div class="table-item-buttons">
                <div>
                    <el-button type="primary" @click="addRow" plain>添加行</el-button>
                    <el-button type="primary" @click="delRow" color="#f89898" plain>删除行</el-button>
                    <el-button type="primary" @click="getRow"  plain>获取选中行</el-button>
                    <el-button type="primary" @click="clearRow" color="#95d475" plain>清空行</el-button>
                </div>
            </div>
        </div>
        <vol-table ref="table" index :tableData="tableData" @rowClick="rowClick" :columns="columns" :max-height="400" :pagination-hide="true"
            :load-key="true" :column-index="true"></vol-table>
    </div>
</template>
<script lang="jsx">
//如果是自定义vue页面使用的配置，在vue页面的script后一定要加上lang="jsx"
import VolTable from "@/components/basic/VolTable.vue";
export default {
    components: {
        'vol-table': VolTable,
    },
    data() {
        return {
            columns: [{ field: 'Order_Id', title: 'Order_Id', type: 'guid', width: 110, hidden: true },
            { field: 'OrderNo', title: '订单编号', type: 'string', width: 130 },
            { field: 'OrderType', title: '订单类型', type: 'int', bind: { key: '订单状态', data: [] }, width: 70 },
            { field: 'TotalPrice', title: '总价', type: 'decimal', width: 60, align: 'center' },
            { field: 'TotalQty', title: '总数量', type: 'int', width: 80, align: 'center' },
            { field: 'OrderDate', title: '订单日期', type: 'date', width: 95 },
            { field: 'CustomerId', title: '客户', type: 'int', width: 80, hidden: true },
            { field: 'Customer', title: '客户', type: 'string', width: 80 },
            { field: 'PhoneNo', title: '手机', type: 'string', width: 110 },
            { field: 'CreateDate', title: '创建时间', type: 'datetime', width: 120 }],
            tableData: [
                {
                    "OrderNo": "D2023082400001",
                    "OrderType": 3,
                    "TotalPrice": 10000,
                    "TotalQty": 20000,
                    "OrderDate": "2023-08-09 00:00:00",
                    "CustomerId": null,
                    "Customer": "阮星竹",
                    "PhoneNo": "18612009000",
                    "OrderStatus": 3,
                    "Remark": null,
                    "CreateDate": "2023-08-24 00:52:52",
                },
                {
                    "OrderNo": "D2022042100003",
                    "OrderType": 2,
                    "TotalPrice": 9000,
                    "TotalQty": 45,
                    "OrderDate": "2022-04-21 00:00:00",
                    "CustomerId": null,
                    "Customer": "王语嫣",
                    "PhoneNo": "18612349000",
                    "OrderStatus": 1,
                    "Remark": "90000",
                    "CreateDate": "2022-04-21 22:35:49",
                },
                {
                    "OrderNo": "D2022040600001",
                    "OrderType": 2,
                    "TotalPrice": 100,
                    "TotalQty": 100,
                    "OrderDate": "2022-04-06 00:00:00",
                    "CustomerId": null,
                    "Customer": "王语嫣",
                    "PhoneNo": "18612349000",
                    "OrderStatus": 2,
                    "Remark": null,
                    "CreateDate": "2022-04-06 01:14:00",
                }
            ]

        }
    },
    methods: {
        rowClick({row,column,index}){
          this.$message.error('点击了第['+(row.elementIndex+1)+']行')
        },
        getRow() {
            const rows = this.$refs.table.getSelected();
            if (!rows.length) {
                this.$message.error('请选中行')
                return;
            }
            this.$message.success(JSON.stringify(rows))
        },
        addRow() {
            this.tableData.push({ OrderNo: "D2022040600009" })
        },
        delRow() {
            this.$refs.table.delRow();
            this.$message.success('删除成功')
        },
        clearRow() {
            this.tableData.splice(0);
            this.$message.success('数据已清空')
        }
    }
}
</script>
<style lang="less" scoped>
.table-item-header {
    display: flex;
    align-items: center;
    padding: 6px;
    .table-item-border {
        height: 15px;
        background: rgb(33, 150, 243);
        width: 5px;
        border-radius: 10px;
        position: relative;
        margin-right: 5px;
    }
    .table-item-text {
        font-weight: bolder;
    }

    .table-item-buttons {
        flex: 1;
        text-align: right;
    }
    .small-text {
        font-size: 12px;
        color: #2196F3;
        margin-left: 10px;
        position: relative;
        top: 2px;
    }
}
</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

# 可编辑的表格一

功能：点击单元格编辑、api加载数据、自动分页、单元格颜色、进度条、行点击编辑前方法、自定义按钮等。。。 An image

查看代码(内容较多，按需配置即可)

<template>
    <div class="table-item">
        <div class="table-item-header">
            <div class="table-item-border"></div> <span class="table-item-text">可编辑的表格一</span>
            <div class="table-item-buttons">
                <div>
                    <el-button type="primary" @click="addRow" plain>添加行</el-button>
                    <el-button type="primary" @click="delRow" color="#f89898" plain>删除行</el-button>
                    <el-button type="primary" @click="getRow" plain>获取选中行</el-button>
                    <el-button type="primary" @click="reload" color="#95d475" plain>刷新</el-button>
                </div>
            </div>
        </div>
        <el-alert type="success" title="" style="line-height: 12px;">
            功能：点击单元格编辑、api加载数据、自动分页、单元格颜色、进度条、行点击编辑前方法、自定义按钮等。。。
        </el-alert>
        <vol-table ref="table" :url="url" index  :columns="columns" :height="200"
            :pagination-hide="false" :load-key="true" :column-index="true" :beginEdit="beginEdit"
            :endEditBefore="endEditBefore"></vol-table>
    </div>
</template>
<script lang="jsx">
//如果是自定义vue页面使用的配置，在vue页面的script后一定要加上lang="jsx"
import VolTable from "@/components/basic/VolTable.vue";
export default {
    components: {
        'vol-table': VolTable,
    },
    data() {
        return {
            //接口返回数据，可以框架生成的接口getPageData
            //如果是自定义的接口，需要返回的数据格式：{total:100,rows:[]}
            url: "api/Demo_Order/getPageData",
            columns: [{ field: 'Order_Id', title: 'Order_Id', type: 'guid', width: 110, hidden: true },
            {
                field: 'OrderNo', title: '输入框', type: 'string', width: 90, edit: { type: "text" }
            },
            { field: 'OrderType', title: '下拉框', type: 'int', bind: { key: '订单状态', data: [] }, width: 90, edit: { type: "select" } },
            {
                field: 'TotalQty', title: '数字', precision: 0, type: 'int', width: 80, align: 'center',
                edit: { type: "number" },
            },//precision小数位数
            { field: 'OrderDate', title: '日期', type: 'date', width: 95, edit: { type: "date" } },

            {
                field: 'Customer', title: '下拉table', type: '', edit: { type: "selectTable" }, width: 100,
                url: 'api/Demo_Customer/getPageData',
                columns: [
                    { field: 'Customer_Id', title: 'Customer_Id', type: 'int', width: 110, hidden: true },
                    //设置search:true,则字段可以搜索
                    { field: 'Customer', title: '客户', type: 'string', width: 80, search: false }, //search是否开启表格上方的字段搜索
                    { field: 'PhoneNo', title: '手机', type: 'string', width: 110, search: false },
                    { field: 'Province', title: '省', type: 'string', bind: { key: '省', data: [] }, width: 80, search: false },
                    { field: 'DetailAddress', title: '详细地址', type: 'string', width: 120 }
                ],
                //选拔数据后回显
                onSelect: (editRow, rows) => {
                    editRow.Customer = rows[0].Customer;
                    editRow.PhoneNo = rows[0].PhoneNo;
                },
                loadBefore: (editRow, params, callback) => {//搜索时设置查询条件
                    //方式1、手动设置查询条件
                    // param.wheres.push({
                    //       name:"GoodsName",
                    //       value:row.GoodsName,
                    //       displayType:"like"
                    // })
                    //方式2、给param.value设置值，后台手动处理查询条件
                    params.value = editRow.GoodsName;
                    callback(true);
                },
                paginationHide: false,//显示分页
                height: 137,//表格高度
                single: true//单选
            },
            {
                field: 'PhoneNo', title: '下拉(联动)', type: 'string', width: 90,
                //单元格颜色
                cellStyle: (row, rowIndex, columnIndex) => {
                    if (row.TotalQty >= 100) {
                        return { background: 'rgb(246 250 253)' };
                    } else {
                        return { background: 'rgb(204 204 204)' };
                    }
                }
            },
            {
                field: 'Price', title: '进度条', type: 'string', width: 110,
                render: (h, { row, column, index }) => {
                    if (index % 2 === 1) {
                        //90改为row.字段
                        return <el-progress stroke-width={4} percentage={90} />
                    }
                    //10改为row.字段
                    return <el-progress stroke-width={4} color="#67c23a" show-text={true} percentage={10} />
                }
            },
            {
                title: '操作',
                field: '操作',
                width: 150,
                align: 'center',// 'center',
                render: (h, { row, column, index }) => {
                    return (
                        <div>
                            <el-button
                                onClick={($e) => {
                                    $e.stopPropagation();
                                    this.editClick(row, column, index);
                                }}
                                type="primary"
                                plain
                                style="height:26px; padding: 10px !important;"
                            >
                                编辑
                            </el-button>

                            {/* 通过条件判断,要显示的按钮 */}
                            {
                                /*  {
                                      index % 2 === 1 
                                      ?<el-button>修改</el-button>
                                      : <el-button>设置</el-button>
                                  } */
                            }


                            {/* 通过v-show控制按钮隐藏与显示
                  下面的index % 2 === 1换成：row.字段==值 */
                            }
                            <el-button
                                onClick={($e) => {
                                    this.btn2Click(row, $e);
                                }}
                                v-show={index % 2 === 1}
                                type="success"
                                plain
                                style="height:26px;padding: 10px !important;"
                            >
                                修改
                            </el-button>

                            <el-button
                                onClick={($e) => {
                                    this.btn2Click(row, $e);
                                }}
                                v-show={index % 2 === 0}
                                type="warning"
                                plain
                                style="height:26px;padding: 10px !important;"
                            >
                                设置
                            </el-button>

                            <el-dropdown
                                onClick={(value) => {
                                    this.dropdownClick(value);
                                }}
                                trigger="click"
                                v-slots={{
                                    dropdown: () => (
                                        <el-dropdown-menu>
                                            <el-dropdown-item>
                                                <div
                                                    onClick={() => {
                                                        this.dropdownClick('京酱肉丝', row, column);
                                                    }}
                                                >
                                                    京酱肉丝
                                                </div>
                                            </el-dropdown-item>
                                            <el-dropdown-item>
                                                <div
                                                    onClick={() => {
                                                        this.dropdownClick('驴肉火烧', row, column);
                                                    }}
                                                >
                                                    驴肉火烧
                                                </div>
                                            </el-dropdown-item>
                                        </el-dropdown-menu>
                                    )
                                }}
                            >
                                <span
                                    style="font-size: 13px;color: #409eff;margin: 5px 0 0 10px;"
                                    class="el-dropdown-link"
                                >
                                    更多<i class="el-icon-arrow-right"></i>
                                </span>
                            </el-dropdown>
                        </div>
                    );
                }
            }
            ]
        }
    },
    methods: {
        editClick(row, column, index) {
            this.$refs.table.edit.rowIndex = index;
        },
        beginEdit(row, column, index) {//点击行进入编辑状态
            
            return true;//false不会进入编辑
        },
        endEditBefore(row, column, index) {//结束编辑时
            this.$message.success('第'+(index+1)+'行结束编辑')
            return true;//false不会结束编辑
        },

        getRow() {
            const rows = this.$refs.table.getSelected();
            if (!rows.length) {
                this.$message.error('请选中行')
                return;
            }
            this.$message.success(JSON.stringify(rows))
        },
        addRow() {
            this.$refs.table.addRow({ OrderNo: "D2022040600009" })
            //如果批量添加行。请使用：
            //this.$refs.table.rowData.push(...[{ OrderNo: "D2022040600009" },{ OrderNo: "D2022040600009" }])
        },
        delRow() {
            this.$refs.table.delRow();
            this.$message.success('删除成功')
        },
        reload() {
            this.$refs.table.load(null, true);
            this.$message.success('刷新成功')
        }
    }
}
</script>
<style lang="less" scoped>
.table-item-header {
    display: flex;
    align-items: center;
    padding: 6px;

    .table-item-border {
        height: 15px;
        background: rgb(33, 150, 243);
        width: 5px;
        border-radius: 10px;
        position: relative;
        margin-right: 5px;
    }

    .table-item-text {
        font-weight: bolder;
    }

    .table-item-buttons {
        flex: 1;
        text-align: right;
    }

    .small-text {
        font-size: 12px;
        color: #2196F3;
        margin-left: 10px;
        position: relative;
        top: 2px;
    }
}</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
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267

# 可编辑的表格二

功能：表尾合计、文件上传、编辑、api加载数据、自动分页、自定义按钮、行点击事件、参数查询、加载loadBefore自定义等。。。 An image

查看代码(内容较多，按需配置即可)

<template>
    <div class="table-item">
        <div class="table-item-header">
            <div class="table-item-border"></div> <span class="table-item-text">可编辑的表格二</span>
            <div class="table-item-buttons">
                <div>
                    <el-input style="width: 140px;margin-right: 10px;" v-model="OrderNo" placeholder="订单编号"></el-input>
                    <el-button type="primary" @click="reload" color="#95d475" plain>查询</el-button>
                    <el-button type="primary" @click="addRow" plain>添加行</el-button>
                    <el-button type="primary" @click="delRow" color="#f89898" plain>删除行</el-button>
                    <el-button type="primary" @click="getRow" plain>获取选中行</el-button>

                </div>
            </div>
        </div>
        <el-alert type="success" title="" style="line-height: 12px;">
            功能：表尾合计、文件上传、编辑、api加载数据、自动分页、自定义按钮、行点击事件、加载loadBefore自定义等。。。
        </el-alert>
        <vol-table @loadBefore="loadBefore" @loadAfter="loadAfter" ref="table" :url="url" index :tableData="tableData"
            :columns="columns" :max-height="500" :pagination-hide="false" :load-key="true" :column-index="true"></vol-table>
    </div>
</template>
<script lang="jsx">
//如果是自定义vue页面使用的配置，在vue页面的script后一定要加上lang="jsx"
import VolTable from "@/components/basic/VolTable.vue";
export default {
    components: {
        'vol-table': VolTable,
    },
    data() {
        return {
            OrderNo: "",
            //接口返回数据，可以框架生成的接口getPageData
            //如果是自定义的接口，需要返回的数据格式：{total:100,rows:[]}
            url: "api/Demo_Order/getPageData",
            columns: [{ field: 'Order_Id', title: 'Order_Id', type: 'guid', width: 110, hidden: true },
            {
                field: 'OrderNo', title: '自定义图标、事件', type: 'string', width: 130, sort: true,
                render: (h, { row, column, index }) => {
                    return (
                        <div>
                            <i onClick={() => { this.$message.success('点击了第1个图标') }} class="el-icon-search" style="color: #2196F3;"></i>
                            <i onClick={() => { this.$message.success('点击了第2个图标') }} class="el-icon-date" style="margin-left:10px;color: #2196F3;"></i>
                            <span style="margin-left:15px">{row.OrderNo}</span>
                        </div>)
                }

            },
            { field: 'OrderType', title: '订单类型', type: 'int', sort: true, bind: { key: '订单状态', data: [] }, width: 70 },
            //summary,后台也要加返回summary数据，可参照api/Demo_Order/getPageData返回的格式及Demo_OrderService.cs中的合计处理
            { field: 'TotalPrice', title: '总价', type: 'decimal', width: 60, sort: true, align: 'center', summary: true },
            { field: 'TotalQty', title: '总数量', type: 'int', width: 80, sort: true, align: 'center', summary: true },
            { field: 'OrderDate', title: '订单日期', type: 'date', width: 95 },
            {
                field: 'Customer', title: '图片上传', type: 'string', width: 80,
                edit: {
                    type: "img",
                    maxFile: 1,//图片上传数量
                    multiple: false,//多图上传,
                    url: "api/Demo_Order/upload"//上传的url,格式为：api/表名/upload 也可以自定义上传接口
                }
            },//type可选类型:'file'/excel
            { field: 'PhoneNo', title: '始终开启编辑', type: 'string', width: 100, edit: { type: "input", keep: true } },
            {
                title: '操作',
                field: '操作',
                width: 150,
                align: 'center',// 'center',
                render: (h, { row, column, index }) => {
                    return (
                        <div>
                            <el-button
                                onClick={($e) => {
                                    $e.stopPropagation();
                                    this.editClick(row, column, index);
                                }}
                                type="primary"
                                plain
                                style="height:26px; padding: 10px !important;"
                            >
                                测试
                            </el-button>

                            {/* 通过条件判断,要显示的按钮 */}
                            {
                                /*  {
                                      index % 2 === 1 
                                      ?<el-button>修改</el-button>
                                      : <el-button>设置</el-button>
                                  } */
                            }


                            {/* 通过v-show控制按钮隐藏与显示
                  下面的index % 2 === 1换成：row.字段==值 */
                            }
                            <el-button
                                onClick={($e) => {
                                    this.btn2Click(row, $e);
                                }}
                                v-show={index % 2 === 1}
                                type="success"
                                plain
                                style="height:26px;padding: 10px !important;"
                            >
                                修改
                            </el-button>

                            <el-button
                                onClick={($e) => {
                                    this.btn2Click(row, $e);
                                }}
                                v-show={index % 2 === 0}
                                type="warning"
                                plain
                                style="height:26px;padding: 10px !important;"
                            >
                                设置
                            </el-button>

                            <el-dropdown
                                onClick={(value) => {
                                    this.dropdownClick(value);
                                }}
                                trigger="click"
                                v-slots={{
                                    dropdown: () => (
                                        <el-dropdown-menu>
                                            <el-dropdown-item>
                                                <div
                                                    onClick={() => {
                                                        this.dropdownClick('京酱肉丝', row, column);
                                                    }}
                                                >
                                                    京酱肉丝
                                                </div>
                                            </el-dropdown-item>
                                            <el-dropdown-item>
                                                <div
                                                    onClick={() => {
                                                        this.dropdownClick('驴肉火烧', row, column);
                                                    }}
                                                >
                                                    驴肉火烧
                                                </div>
                                            </el-dropdown-item>
                                        </el-dropdown-menu>
                                    )
                                }}
                            >
                                <span
                                    style="font-size: 13px;color: #409eff;margin: 5px 0 0 10px;"
                                    class="el-dropdown-link"
                                >
                                    更多<i class="el-icon-arrow-right"></i>
                                </span>
                            </el-dropdown>
                        </div>
                    );
                }
            }
            ]
        }
    },
    methods: {
        editClick(row, column, index) {
            this.$refs.table.edit.rowIndex = index;
        },
        loadBefore(params, callBack) {//调用后台接口前处理
            //设置查询条件参数
            params.wheres.push({
                name: "OrderNo",
                value: this.OrderNo,
                displayType: "like"//模糊查询
            })

            //也可以给value设置值，后台自己解析
            // params.value=this.OrderNo
            
            //查询前方法也可以动态设置url参数
            //params.url='api/xxx/xx?参数1='+this.xx参数

            callBack(true)//false不会调用后台接口
        },
        //查询后方法
        loadAfter(rows, callBack, result) {
             //如果有合计：后台返回合计格式
            <!-- var data=new {
                rows=[],//返回的行数据
                total=200,//返回的总行数
                //合计
                summary={ TotalPrice=100, TotalQty=200 }
            } -->
            callBack(true)
        },
        getRow() {
            const rows = this.$refs.table.getSelected();
            if (!rows.length) {
                this.$message.error('请选中行')
                return;
            }
            this.$message.success(JSON.stringify(rows))
        },
        addRow() {
            this.$refs.table.addRow({ OrderNo: "D2022040600009" })
            //如果批量添加行。请使用：
            //this.$refs.table.rowData.push(...[{ OrderNo: "D2022040600009" },{ OrderNo: "D2022040600009" }])
        },
        delRow() {
            this.$refs.table.delRow();
            this.$message.success('删除成功')
        },
        reload() {
            this.$refs.table.load(null, true);
            this.$message.success('查询成功')
        }
    }
}
</script>
<style lang="less" scoped>
.table-item-header {
    display: flex;
    align-items: center;
    padding: 6px;

    .table-item-border {
        height: 15px;
        background: rgb(33, 150, 243);
        width: 5px;
        border-radius: 10px;
        position: relative;
        margin-right: 5px;
    }

    .table-item-text {
        font-weight: bolder;
    }

    .table-item-buttons {
        flex: 1;
        text-align: right;
    }

    .small-text {
        font-size: 12px;
        color: #2196F3;
        margin-left: 10px;
        position: relative;
        top: 2px;
    }
}
</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
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252

# 多级表头、表格合并

功能：多级表头、单元格合并 An image

查看代码(内容较多，按需配置即可)

<template>
    <div class="table-item">
        <div class="table-item-header">
            <div class="table-item-border"></div> <span class="table-item-text">多级表头</span>
            <div class="table-item-buttons">
                <div>
                    <el-input style="width: 140px;margin-right: 10px;" v-model="OrderNo" placeholder="订单编号"></el-input>
                    <el-button type="primary" @click="reload" color="#95d475" plain>查询</el-button>
                    <el-button type="primary" @click="addRow" plain>添加行</el-button>
                    <el-button type="primary" @click="delRow" color="#f89898" plain>删除行</el-button>
                    <el-button type="primary" @click="getRow" plain>获取选中行</el-button>

                </div>
            </div>
        </div>
        <el-alert type="success" title="" style="line-height: 12px;">
            功能：多级表头、单元格合并
        </el-alert>
        <vol-table @loadBefore="loadBefore" @loadAfter="loadAfter" ref="table" :url="url" index :tableData="tableData"
            :columns="columns" :max-height="500" :pagination-hide="false" :load-key="true" :ck="false"
            :column-index="true"></vol-table>
    </div>
</template>
<script lang="jsx">
//如果是自定义vue页面使用的配置，在vue页面的script后一定要加上lang="jsx"
import VolTable from "@/components/basic/VolTable.vue";
export default {
    components: {
        'vol-table': VolTable,
    },
    data() {
        return {
            OrderNo: "",
            //接口返回数据，可以框架生成的接口getPageData
            //如果是自定义的接口，需要返回的数据格式：{total:100,rows:[]}
            url: "api/Demo_Order/getPageData",
            columns: [
                {
                    field: '基础信息',
                    title: '基础信息',
                    type: 'string',
                    align: 'center',
                    children: [
                        { field: 'OrderNo', title: '订单编号', type: 'string', width: 130 },
                        { field: 'OrderType', title: '订单类型', type: 'int', bind: { key: '订单状态', data: [] }, width: 70 },
                        { field: 'TotalPrice', title: '总价', type: 'decimal', width: 60, align: 'center' },
                        { field: 'TotalQty', title: '总数量', type: 'int', width: 80, align: 'center' },
                        { field: 'OrderDate', title: '订单日期', type: 'date', width: 95 },
                    ]
                },
                {
                    field: '状态',
                    title: '状态',
                    type: 'string',
                    align: 'center',
                    children: [
                        {
                            field: 'OrderType', title: '订单类型', type: 'int', bind: { key: '订单状态', data: [] }, width: 90
                        },
                        {
                            field: 'OrderStatus', title: '订单状态', type: 'int', bind: { key: '订单状态', data: [] }, width: 90
                        }
                    ]
                },
                {
                    field: '创建人信息',
                    title: '创建人信息',
                    type: 'string',
                    align: 'center',
                    children: [
                        { field: 'Creator', title: '创建人', type: 'string', width: 130 },
                        { field: 'CreateDate', title: '创建时间', type: 'datetime', width: 90 }
                    ]
                },
                {
                    field: '修改人信息',
                    title: '修改人信息',
                    type: 'string',
                    align: 'center',
                    children: [
                        { field: 'Modifier', title: '修改人', type: 'string', width: 130 },
                        { field: 'ModifyDate', title: '修改时间', type: 'datetime', width: 90 }
                    ]
                }
            ]
        }
    },
    methods: {
        editClick(row, column, index) {
            this.$refs.table.edit.rowIndex = index;
        },
        loadBefore(params, callBack) {//调用后台接口前处理
            //设置查询条件
            params.wheres.push({
                name: "OrderNo",
                value: this.OrderNo,
                displayType: "like"//模糊查询
            })

            //也可以给value设置值，后台自己解析
            // params.value=this.OrderNo

            //查询前方法也可以动态设置url参数
            //params.url='api/xxx/xx?参数1='+this.xx参数
            
            callBack(true)//false不会调用后台接口
        },
        //查询后方法
        loadAfter(rows, callBack, result) {
            callBack(true)
        },
        getRow() {
            const rows = this.$refs.table.getSelected();
            if (!rows.length) {
                this.$message.error('请选中行')
                return;
            }
            this.$message.success(JSON.stringify(rows))
        },
        addRow() {
            this.$refs.table.addRow({ OrderNo: "D2022040600009" })
            //如果批量添加行。请使用：
            //this.$refs.table.rowData.push(...[{ OrderNo: "D2022040600009" },{ OrderNo: "D2022040600009" }])
        },
        delRow() {
            this.$refs.table.delRow();
            this.$message.success('删除成功')
        },
        reload() {
            this.$refs.table.load(null, true);
            this.$message.success('查询成功')
        }
    }
}
</script>
<style lang="less" scoped>
.table-item-header {
    display: flex;
    align-items: center;
    padding: 6px;

    .table-item-border {
        height: 15px;
        background: rgb(33, 150, 243);
        width: 5px;
        border-radius: 10px;
        position: relative;
        margin-right: 5px;
    }

    .table-item-text {
        font-weight: bolder;
    }

    .table-item-buttons {
        flex: 1;
        text-align: right;
    }

    .small-text {
        font-size: 12px;
        color: #2196F3;
        margin-left: 10px;
        position: relative;
        top: 2px;
    }
}
</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
164
165
166
167
168

# 树形结构

功能：树形table An image

查看代码(内容较多，按需配置即可)

<template>
    <div class="table-item">
        <div class="table-item-header">
            <div class="table-item-border"></div> <span class="table-item-text">树形结构</span>
            <div class="table-item-buttons">
                <div>
                    <el-input style="width: 140px;margin-right: 10px;" v-model="OrderNo" placeholder="订单编号"></el-input>
                    <el-button type="primary" @click="reload" color="#95d475" plain>查询</el-button>
                </div>
            </div>
        </div>
        <el-alert type="success" title="" style="line-height: 12px;">
            功能：树形table
        </el-alert>
        <vol-table :rowKey="rowKey" :rowParentField="rowParentField" @loadBefore="loadBefore" @loadAfter="loadAfter"
            ref="table" :url="url" index :tableData="tableData" :columns="columns" :max-height="500" :lazy="lazy"
            :pagination-hide="paginationHide" :load-key="true" :ck="false" :column-index="true" :defaultExpandAll="defaultExpandAll"></vol-table>
    </div>
</template>
<script lang="jsx">
//如果是自定义vue页面使用的配置，在vue页面的script后一定要加上lang="jsx"
import VolTable from "@/components/basic/VolTable.vue";
export default {
    components: {
        'vol-table': VolTable,
    },
    data() {
        return {
            //隐藏分页
            paginationHide: true,
            //延迟加载
            lazy: false,
            //树形结点的id字段
            rowKey: 'DepartmentId',
            //父级id字段
            rowParentField:"ParentId",
            defaultExpandAll:true,// //树形表格是否展开所有
            OrderNo: "",//查询字段
            //接口返回数据，可以框架生成的接口getPageData
            //如果是自定义的接口，需要返回的数据格式：{total:100,rows:[]}
            url: "api/Sys_Department/getPageData",
            columns: [{ field: 'DepartmentId', title: 'DepartmentId', type: 'guid', width: 110, hidden: true },
            { field: 'DepartmentName', title: '名称', type: 'string', width: 150 },
            { field: 'ParentId', title: '上级组织', type: 'guid', bind: { key: '部门级联', data: [] }, width: 110, hidden: true },
            { field: 'DepartmentCode', title: '编号', type: 'string', width: 90 },
            { field: 'DepartmentType', title: '类型', type: 'string', bind: { key: '组织类型', data: [] }, width: 80 },
            { field: 'Enable', title: '是否可用', type: 'int', bind: { key: 'enable', data: [] }, width: 80 },
            { field: 'Remark', title: '备注', type: 'string', width: 100 },
            { field: 'Creator', title: '创建人', type: 'string', width: 100 },
            { field: 'CreateDate', title: '创建时间', type: 'datetime', width: 150 },
            { field: 'Modifier', title: '修改人', type: 'string', width: 100 },
            { field: 'ModifyDate', title: '修改时间', type: 'datetime', width: 150 }]
        }
    },
    methods: {
        editClick(row, column, index) {
            this.$refs.table.edit.rowIndex = index;
        },
        loadBefore(params, callBack) {//调用后台接口前处理
            //设置查询条件
            params.wheres.push({
                name: "OrderNo",
                value: this.OrderNo,
                displayType: "like"//模糊查询
            })

            //也可以给value设置值，后台自己解析
            // params.value=this.OrderNo

            callBack(true)//false不会调用后台接口
        },
        //查询后方法
        loadAfter(rows, callBack, result) {
            callBack(true)
        },
        reload() {
            this.$refs.table.load(null, true);
            this.$message.success('查询成功')
        }
    }
}
</script>
<style lang="less" scoped>
.table-item-header {
    display: flex;
    align-items: center;
    padding: 6px;

    .table-item-border {
        height: 15px;
        background: rgb(33, 150, 243);
        width: 5px;
        border-radius: 10px;
        position: relative;
        margin-right: 5px;
    }

    .table-item-text {
        font-weight: bolder;
    }

    .table-item-buttons {
        flex: 1;
        text-align: right;
    }

    .small-text {
        font-size: 12px;
        color: #2196F3;
        margin-left: 10px;
        position: relative;
        top: 2px;
    }
}
</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



# 属性

属性 说明 类型 默认值
rowKey 树形table的主键字段(需要与下面loadTreeChildren方法配合使用) string
loadKey 是否自动绑定数据源key/value,如果=true会自动把带bind属性data长度为0的列绑定上数据源 bool false
height table高度 number
dragPosition 表格拖动改变高度(可拖动位置，顶部拖动top,底部bottom) string top/bottom
clickEdit 单击编辑与单击结束编辑(2020.10.11) bool false
max-height table最大高度,如果设置了max-height属性，height属性将不会生效 number
single 是否只能单选 number false
ck 是否显示checkbox bool true
columnIndex 是否显示index序号(2020.11.01) bool false
pagination 分页参数 json { total: 0, size: 0, sortName: ''}
{
total 总数量 number 0
size 分页大小 number 0
sizes 分页条数 Array [30,60,100,120]
sortName 排序字段 string
}
url api接口地址,查询条件在loadBefore中实现,如,在methods中添加loadBefore方法，见下面loadBefore注意：接口参数返回格式为:{rows:[],total:100,summary:{price:70,qty:20}} //rows为返回的数据，total为总数量,summary为表格汇总信息没有可以不用返回,或者随便点开生成的页面点查询，看返回的数据格式 string
defaultLoadPage 传入了url参数，是否默认加载表格数据 bool true
paginationHide 是否隐藏分页数据 bool true
index 是否创建索引号(如果启用编辑功能,index必须设置为true) bool false
tableData table表数据，如果不需要从远程加载table数据，请设置tableData属性,格式:[{'字段1':'值1'},{'字段2':'值2'}] array []
columns table表参数配置 array []
{----- -----columns属性介绍开始处----- ----- -----
field 字段 string
render 支持vue原生render处理,[前端开发->render渲染form对象1/2]为配置示例，render完整用法见vue官方文档(2020.06.20) function
cellStyle 单元格td背景颜色,cellStyle:(row, rowIndex, columnIndex)=\> return { background: '#f3f3f3' } function
title table列名 string
showOverflowTooltip 当内容过长被隐藏时显示tooltip(2022.08.26更新voltable.vue组件,仅支持vue3版本) boll false
width 列宽度 number
sort 是否排序列 bool false
hidden 是否隐藏列 bool false
fixed 是否固定列 bool false
format 选择日期后自定义显示的格式，如:YYYY-MM-DD string false
type 目前只有img,file(设置了此属性，点击即可下载文件),其他不需要设置 string
required 是否必填项(设置edit了属性才会生效) bool false
summary 是否显示统计求和,目前远程api返回的数据才有效，前台参照Demo_Order.js配置,后台可参照Demo_Order表查询数据返回的格式 bool false
readonly 单元格是否只读,为true时单元格不可以编辑，下面edit属性会同时失效(应用场景：动态设置table列是否可以编辑) bool false
edit:{ 表格编辑配置 json
type 编辑创建的标签类型：number、decimal、text、datetime、date、switch、select
keep 当前单元格始终处于编辑状态 bool false
min type为number、decimal时验证最小值,其他验证长度 number
max} 同上min number
normal 是否移除table列数据源显示的背景颜色， bool false
getStyle getStyle:(row, column) => { //设置列的背景颜色，只在设置normal=true属性后才会生效 if (row.City == "北京市") { return { color: "red", cursor: "pointer" }; } return { color: "blue", cursor: "pointer" }; }
function --
-- -- -- --
onChange select、switch、date、datetime组件选择事件(只对编辑生效)为date、datetime时onChange(row,column,date)只有这三个参数，2023.04.11以前的代码需要更新voltable.vue文件onChange:(column,row,tableData,value)=>{this.$Message.error(row["test2"]);__}, function
extra 额外标签(只对编辑生效) json
额外标签 extra: {icon: "ios-search", //图标text: "点击事件",//显示文本style: "line-height: 31px;margin-left: 3px;",//自定义样式//column列配置, row数据, tableData整个table的数据源click: (column, row, tableData) => {// this.getRows();this.$Message.error("点击标签触发的事件");}}
bind{ 数据源绑定配置 json
key 后台字典数据的key string
data} 数据源,如果设置的loadKey=true,些处将设置为data:[]。格式:[{key:'1',value:'北京市'},{key:'2',value:'上海市',hidden:false,disabled:false}],(hidden下拉框选项是否隐藏,disabled下拉框选项是否禁用,2022.05.08更新后才能使用),如果data长度>0，不会被loadKey从后台加载的数据源覆盖 array []
formatter 列格式化处理,格式：formatter:(row) => {return '123'} function
click 单元格点击事件,格式：click: (row, column, event) => {} function
getColor 设置绑定了bind数据源属性的单元格颜色,格式：getColor:(row) => {return 'red'} function
-----} -----columns属性介绍结尾处----- ----- -----

方法

方法名 说明 参数
delRow 删除选中行，this.$refs.自定义的名字.delRow()
--- --- ---
addRow 添加行，this.$refs.自定义的名字.addRow({'字段1':'值1','字段2':'值2'})；批量添加行：this.$refs.自定义的名字.rowData.push(...[{'字段1':'值1'},{'字段2':'值2'}]);(vue3版本不要循环添加，请使用批量添加
selection 获取选中的行，this.$refs.自定义的名字.selection,注意此处selection是属性
getSelected 获取选中的行(vue3版本才能使用)，this.$refs.自定义的ref名字.getSelected()
获取底部统计合计数据 this.$refs.自定义的ref名字.summaryData
获取/设置table正在编辑的行 this.$refs.自定义的ref名字.edit.rowIndex //设置值可以指定某行处于编辑状态，值为-1时关闭编辑状态，
tableData/rowData 获取表中的所有行数据 this.$refs.自定义的名字.tableData/rowData(如果传入了url参数，使用rowData)
reset 清空表数据 this.$refs.自定义的名字.reset
load //刷新表数据，this.$refs.自定义的名字.load(params,true)//也可以在loadBefore方法中实现查询条件 /*params查询条件格式： let params = { page: 1,//分页页数(可不填) rows: 30,//分页大小(可不填) sort:"排序字段",//可不填 order: "desc/asc", //可不填 wheres: [{ name: "字段1", value: "xx",displayType:"select/selectList/like" }, { name: "字段2", value: "x2",displayType:"select/selectList/like" }]// 查询条件(可不填) };*/ //第二个参数true:是否重置分页信息
resetPage 重置分页信息，this.$refs.自定义的名字.resetPage()
loadBefore 查询前处理，见上面的loadBefore方法实现
loadAfter 从后台加载数据后处理，可参照【从api加载数据】Demo (data, callBack) 参数：data为后台返回的数据;callBack回调方法，callBack(true),如果回调传入false，将中断代码执行
rowChange 行选中事件,只有设置single=true单选才会生效 row,当前选中的行
rowClick 单击行事件同时选中当前行选中:rowClick ({ row, column, event }) { // this.$refs.table.$refs.table.clearSelection();//清除当前选中的行 this.$refs.table.$refs.table.toggleRowSelection(row);}, {row:当前选中的行,column:当前行配置,$event:当前事件}
rowDbClick 双击行事件(2021.05.23新增),点击时选中当前行，见上面rowClick {row:当前选中的行,column:当前行配置,$event:当前事件}
loadTreeChildren loadTreeChildren(tree, treeNode, resolve) { //加载子节点 let url="api/xxx?roleId="+tree.Role_Idthis.http.post(url,{}).then(result=>{ resolve(result.rows) })}