一、【主列表】list.vue
复制代码
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<template> <!-- 外部用户 --> <div class="externalUsers"> <el-form :inline="true" :model="queryParam" ref="queryParam" label-width="90px" class="demo-form-inline"> <el-form-item label="订单号：" prop="position"> <el-input v-model="queryParam.order_num" placeholder="请输入"></el-input> </el-form-item> <el-form-item label="下单人：" prop="position"> <el-input v-model="queryParam.create_name" placeholder="请输入"></el-input> </el-form-item> <el-button type="primary" size="small" @click="conditionQuery">查询</el-button> <el-button size="small" @click="resetQuery()">重置</el-button> </el-form> <el-button type="primary" size='small' @click="handleAdd('【动态传参】')" style="margin-left: 20px;">新增</el-button> <!-- 内容区 --> <el-row> <el-container class="mian"> <!-- table表格 --> <el-main> <div class="table"> <el-table ref="table" :stripe="true" :data="tableData" :row-key="getRowKeys" size="small" :header-cell-style="{ 'text-align': 'center', background: '#fafafa' }" height="63vh" @selection-change="handleSelectionChange"> <el-table-column type="selection" align="center" :reserve-selection="true" width="60"> </el-table-column> <el-table-column prop="order_num" label="订单号" sortable align="center"> </el-table-column> <el-table-column prop="create_name" label="下单人" sortable align="center" width="200"> </el-table-column> <el-table-column prop="create_phone" label="手机号" sortable align="center"> </el-table-column> <el-table-column prop="client_name" label="客户名称" sortable align="center"> </el-table-column> <el-table-column prop="annualCount" label="年费件数" sortable align="center"> </el-table-column> <el-table-column prop="all_official_fee" label="官费金额" sortable align="center"> </el-table-column> <el-table-column prop="all_agency_fee" label="代理费金额" sortable align="center"> </el-table-column> <el-table-column prop="order_status" label="订单状态" sortable align="center"> </el-table-column> <el-table-column prop="create_date" label="下单时间" sortable align="center" width="150"> </el-table-column> <el-table-column fixed="right" label="操作" align="center" width="220"> <template slot-scope="scope"> <el-button type="text" size="small" v-if="scope.row.order_status_code =='F' || scope.row.order_status_code =='A' || scope.row.order_status_code =='C' || scope.row.order_status_code =='D'" @click="changeStatus('D',scope.row.order_num)">删除</el-button> </template> </el-table-column> <!-- 空数据 --> <div slot="empty" style="height: 63vh;display: flex;justify-content: center;align-items: center;"> <div> <img src="../../../static/img/Group 6.png" /> <p>暂无数据</p> </div> </div> </el-table> <!-- 分页 --> <div style="height: 50px;display: flex;justify-content: flex-end;align-items: center;margin-right: 10px;" class="myTranslationContent_page"> <!-- 当前页数，支持 .sync 修饰符 1 --> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="params.currPage" :page-sizes="params.pageSizeArr" :page-size="params.pageSize" :layout="params.layout" :total="params.totalCount"> </el-pagination> </div> </div> </el-main> </el-container> </el-row> <!-- 新增 --> <com-modal ref="modalForm" @ok="modalFormOk"></com-modal> </div> </template> <script> import comModal from './modules/comModal' import { CommonJs } from '../../api/common.js' //引入公共js export default { mixins:[CommonJs], components: { comModal }, data() { return { url:{ list:"/api/AnnualFeeOrder/GetAnnualFeeOrderList", }, }; }, computed: { }, mounted() { }, methods: { }, created() { }, }; </script> <style scoped> </style>
二、【新增】modal.vue
复制代码
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<template> <div> <el-dialog :title="title" :visible.sync="dialogVisible" width="30%" > <com-form ref="realForm" @ok="submitCallback"></com-form> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="handleOk">确 定</el-button> </span> </el-dialog> </div> </template> <script> import comForm from './comForm' export default{ components: { comForm }, data(){ return{ title:'', dialogVisible:false, } }, methods:{ add () { this.dialogVisible = true }, // 确定 handleOk(){ this.$refs.realForm.submitForm(); }, // form 触发此方法 submitCallback(){ this.$emit('ok',this.$refs.realForm.model); //触发list页面ok的方法 this.dialogVisible = false; }, } } </script>
三、【新增】form.vue
复制代码
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<template> <div> <el-form ref="form" :model="model" label-width="80px"> <el-form-item label="活动名称"> <el-input v-model="model.name" placeholder="请输入活动名称"></el-input> </el-form-item> <el-form-item label="活动区域"> <el-select v-model="model.region" placeholder="请选择活动区域"> <el-option label="区域一" value="shanghai"></el-option> <el-option label="区域二" value="beijing"></el-option> </el-select> </el-form-item> </el-form> </div> </template> <script> export default { data() { return { model:{} } }, created() { this.modelDefault = JSON.parse(JSON.stringify(this.model)); }, methods:{ submitForm(){ //console.log(this.model); this.$emit('ok',this.model); //触发父页面的submitCallback方法 }, } } </script>
四、【公共js】common.js
复制代码
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
119import Vue from 'vue' export const CommonJs = { data(){ return { queryParam: {}, // 列表主页面查询条件 tableData: [], // 表格数据 // 分页参数 params: { currPage: 1, //初始页面 pageSize: 5, // 每页的数据 totalCount: 0, //总共多少条数据 pageSizeArr:[2, 5, 10, 50,100,300], //条数切换 layout:'total,sizes, prev, pager, next, jumper', condition:{} }, checkData: [], // table 选中数据 checkDataID: [], // table选中数据ID } }, created() { this.loadData(); }, methods:{ // ********************一、【新增】 弹框出现到保存成功，重新回调列表方法****************************************************************** // 新增 handleAdd(m) { this.$refs.modalForm.add(); this.$refs.modalForm.title = "新建" + m; this.$refs.modalForm.disableSubmit = false; }, // 新增弹框 保存方法（获取form值；调用保存接口；清空列表勾选） modalFormOk(params){ console.log(params) //$emit传参 // 新增/修改 成功时，重载列表 this.loadData(); //清空列表选中 this.$refs.table.clearSelection() this.onClearSelected() }, // 新增弹窗 保存方法清空列表选中的值 onClearSelected(){ this.checkData = []; // table 选中数据 this.checkDataID = []; // table选中数据ID }, // ********************二、【列表】********************************* // 初始化获取列表数据 loadData(){ var _this = this; this.$http .post(this.url.list, this.params) .then(function(res) { if (res.data.resultcode == 200) { _this.tableData = res.data.result; _this.params.totalCount = Number(res.data.total) } }) .catch((error) => {}); }, // 查询 conditionQuery() { // 对象拼接 // this.params = Object.assign(this.params,this.queryParam); this.params.condition = this.queryParam; this.loadData(); }, // 重置 resetQuery() { this.queryParam = {}; this.params.condition = {} this.params.currPage = 1 this.params.pageIndex = 1; this.loadData(); }, // 列表复选框选中赋值 handleSelectionChange(val) { this.checkData = val; }, /* 分页的记忆功能，分页保存选中的数据 :row-key="getRowKeys" :reserve-selection="true" */ getRowKeys(row) { return row.order_num; // n_ID为列表数据的唯一标识 }, // 分页每页展示条数更改 handleSizeChange(val) { this.params.currPage = 1; this.params.pageSize = val; this.loadData(); }, //分页切换 handleCurrentChange(val) { this.params.pageIndex = val; this.loadData(); }, // ******************************************************** } }
最后
以上就是包容学姐最近收集整理的关于vue + element 列表 新增 查询 封装的全部内容，更多相关vue内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复