项目目录……改一点
“src/view/learn-bussiness-catch”： | bsns0628 |--| components |--|--| additem.vue //组件 添加事件 表单 |--|--| eidtitem.vue //组件 编辑 项事件 表单 |--|--| seeitem.vue //组件 查看详情 项事件 表单 |--|--| prgitem.vue //组件 审批详情 项事件 表单 |--|--| loadup.vue //组件 上传文件确认事件 弹窗 |--|--| loaddown.vue //组件 下载文件确认事件 弹窗 |--|--| sethead.vue //组件 改变表头项 |--|--| sub-req.vue //搜索条件 |--| index.vue //数据处理都搁这，还有表格显示 | bsns0630
开始重写
nextTick用法参考网址： https://www.jianshu.com/p/a7550c0e164f 用于苟住数据。
在created用：渲染html前调用，初始化值再渲染。
在mounted用：渲染html后调用，页面完成后操作dom。
过程中错愕的发现个人习惯 import subReq from './components/sub-req'
但是VS Code输入import subReq回车会自动写成 import subReqVue from './components/sub-req.vue'
上网查了一下，都可以，那就辛苦VS Code了。
对于el-table的属性：
ref="用于引用的表名"
:data="数据源变量"
tooltip-effect="dark"
style="width: 100%"
@selection-change="选择行时的函数"
单行选中事件：
选择行时的函数(val) {
this.存单行数据的变量 = val;
//done
}
多行选中的事件：
toggleSelection(rows){
//用的时候直接写toggleSelection()，不用带参
//如果带参，写toggleSelection([数据源[i]])，表示对应项
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
}
index施工：
1 <template>
2 <div class="normal-price">
3 <el-tag>
4 这是一个练习页面,创建于20230628,目标为订单状态追踪,参考订单管理（新）界面。
5 </el-tag>
6 <!-- 条件筛选栏 sub-req 传值form，按钮处返回data-->
7 <sub-req :sform="form" @search="search"/>
8 <!-- 按钮操作栏 el-row-->
9 <el-row style="margin: 10px;">
10 <div style="float: left; display: flex;">
11 <el-button size="small" @click="isadd = true" icon="el-icon-plus">添加</el-button>
12 <el-button size="small" @click="datadel()" icon="el-icon-delete">删除</el-button>
13 <el-button size="small" @click="isloadup = true" icon="el-icon-upload2">导入</el-button>
14 <el-button size="small" @click="isloaddown = true" icon="el-icon-download">导出</el-button>
15 </div>
16 <div style="float: right; display: flex;">
17 <el-button circle plain icon="el-icon-refresh" type="primary" size="small"
18 @click="loadData()"/>
19 <el-button circle plain icon="el-icon-s-tools" type="primary" size="small"
20 @click="issethead = true"/>
21 </div>
22 </el-row>
23 <!-- 数据表单 el-table
24 参数说明：
25 ref="datatable"//表示调用可以用这个名datatable
26 border//表示带边框，可以拖曳调整列宽
27 height="400"//为了固定表头、定下表单高度
28 v-loading="isload"//是否显示加载图标
29 :data="data"//表单数据源
30 :hdata="hdata"//表头数据源
31 @selection-change="getItem"//获取单行选中数据
32 -->
33 <el-table
34 header-cell-style="
35 background-color: RGB(236,245,255);
36 color: #409EFF;
37 border-color: RGB(236,245,255);"
38 ref="datatable"
39 border
40 v-loading="isload"
41 :data="data"
42 :hdata="hdata"
43 size="mini"
44 @selection-change="getItem"
45 >
46 <!-- 多选框的选择框框列 -->
47 <el-table-column type="selection"/>
48 <!-- 若干数据列 -->
49 <el-table-column
50 v-for="item in hdata"
51 :key="item"
52 :prop="item.prop"
53 :label="item.label"
54 :fixed="item.fixed"
55 :sortable="item.sortable">
56 </el-table-column>
57 <!-- 行末操作列 -->
58 <el-table-column
59 fixed="right"
60 label="操作"
61 width="150">
62 <template slot-scope="scope">
63 <el-tooltip class="item" effect="dark" content="编辑内容" placement="top-end">
64 <el-button circle size="mini" icon="el-icon-edit"
65 @click="OPENedit(scope.row)"></el-button>
66 </el-tooltip>
67 <el-tooltip class="item" effect="dark" content="查看详情" placement="top-end">
68 <el-button circle size="mini" icon="el-icon-s-order"
69 @click="OPENsee(scope.row)"></el-button>
70 </el-tooltip>
71 <el-tooltip class="item" effect="dark" content="查看审批" placement="top-end">
72 <el-button circle size="mini" icon="el-icon-s-promotion"
73 @click="OPENprg(scope.row)"></el-button>
74 </el-tooltip>
75 </template>
76 </el-table-column>
77 </el-table>
78 <!-- 分页功能条 -->
79 <el-pagination
80 style="margin: 5px 0; display: flex; justify-content: flex-end"
81 @current-change="PageChange"
82 @size-change="SizeChange"
83 :current-page.sync="pageInfo.pageIndex"
84 :page-sizes="[5, 10, 20, 50, 100]"
85 :page-size="pageInfo.pageSize"
86 :total="pageInfo.pageCount"
87 layout="total,sizes, prev, pager, next, jumper"
88 ></el-pagination>
89
90 <!-- 到此直接显示内容编辑完毕 -->
91 <!-- 以下为按钮事件弹窗dialog
92 dialog提交事件统一命名为SB函数-即SubmitXXX
93 dialog传值-父传子变量统一命名为FTC变量-即FatherToChildXXX
94 dialog传值-子传父事件统一命名为CTF函数-即ChildToFatherXXX -->
95
96 <!-- 上传文件事件 传值已部署:CTF-data -->
97 <el-dialog
98 title="上传文件"
99 :visible.sync="isloadup">
100 <loadup-vue @CTFaddexcel="CTFaddexcel"/>
101 </el-dialog>
102 <!-- 下载文件事件 传值已部署:FTC-data -->
103 <el-dialog
104 title="下载文件"
105 :visible.sync="isloaddown">
106 <loaddown-vue :FTCloaddown="data"/>
107 </el-dialog>
108 <!-- 添加按钮表单 传值已部署:CTF-data -->
109 <el-dialog
110 title="添加数据"
111 :visible.sync="isadd">
112 <additem-vue @CTFadd="CTFadd"/>
113 </el-dialog>
114 <!-- 更改表头表单 传值已部署:FTC+CTF-hdata -->
115 <el-dialog
116 title="更改表头"
117 :visible.sync="issethead">
118 <sethead-vue :FTCsethead="hdata" @CTFsethead="CTFsethead"/>
119 </el-dialog>
120
121 <!-- 编辑项表单 传值已部署:FTC+CTF-dataitem
122 {{dataitem}}将用于测试选中功能是否正常-->
123 <el-dialog
124 title="信息编辑"
125 :visible.sync="isedit">
126 <eidtitem-vue :FTCedit="dataitem" @CTFedit="CTFedit"/>
127 {{ dataitem }}
128 </el-dialog>
129 <!-- 查看项详情表单 传值已部署:FTC-dataitem -->
130 <el-dialog
131 title="查看详情"
132 :visible.sync="issee">
133 <seeitem-vue :FTCsee="dataitem"/>
134 {{ dataitem }}
135 <span slot="footer" class="dialog-footer">
136 <el-button @click="issee = false">取 消</el-button>
137 <el-button type="primary" @click="SBsee">确 定</el-button>
138 </span>
139 </el-dialog>
140 <!-- 查看项审批表单 传值已部署:FTC-dataitem -->
141 <el-dialog
142 title="查看审批"
143 :visible.sync="isprg">
144 <prgitem-vue :FTCprg="dataitem"/>
145 {{ dataitem }}
146 <span slot="footer" class="dialog-footer">
147 <el-button @click="isprg = false">取 消</el-button>
148 <el-button type="primary" @click="SBprg">确 定</el-button>
149 </span>
150 </el-dialog>
151
152 <!-- 功能测试: 删除按钮能否对特定行操作 Notification → methods -->
153 </div>
154 </template>
155
156 <script type="text/ecmascript-6">
157 import { isNullOrUndefined } from 'util'
158 import additemVue from './components/additem.vue'
159 import eidtitemVue from './components/eidtitem.vue'
160 import loaddownVue from './components/loaddown.vue'
161 import loadupVue from './components/loadup.vue'
162 import prgitemVue from './components/prgitem.vue'
163 import seeitemVue from './components/seeitem.vue'
164 import setheadVue from './components/sethead.vue'
165 import subReq from './components/sub-req.vue'
166
167 export default {
168 name: 'learn0628',
169 components: {
170 subReq,
171 setheadVue,
172 seeitemVue,
173 prgitemVue,
174 loaddownVue,
175 loadupVue,
176 eidtitemVue,
177 additemVue,
178 },
179 data () {
180 return {
181 pageInfo: { //分页默认展示配置
182 pageIndex: 1, //所在页数
183 pageSize: 10, //每页展示项数
184 pageCount: 6, //总项数
185 },
186 form: {}, //存放sub-req表单的选择数据
187 data: [],//每页展示的数据列表
188 dataget: [//数据源
189 {
190 ssid:'SSA1',
191 ssdate:'2023-06-27',
192 cstname:'张三',
193 cstpower:'A',
194 money:'1234',
195 gotime:'2023-06-28',
196 sskind:'已审核',
197 htid:'HTA1',
198 paykind:'3期',
199 paybool:'已付款'
200 },{
201 ssid:'SSA2',
202 ssdate:'2023-06-27',
203 cstname:'李四',
204 cstpower:'B',
205 money:'4321',
206 gotime:'2023-06-28',
207 sskind:'未审核',
208 htid:'HTA2',
209 paykind:'3期',
210 paybool:'未付款'
211 },{
212 ssid:'SSA3',
213 ssdate:'2023-06-27',
214 cstname:'王五',
215 cstpower:'C',
216 money:'1111',
217 gotime:'2023-06-28',
218 sskind:'已审核',
219 htid:'HTA3',
220 paykind:'6期',
221 paybool:'未付款'
222 },{
223 ssid:'SSA4',
224 ssdate:'2023-06-27',
225 cstname:'赵六',
226 cstpower:'C',
227 money:'1001',
228 gotime:'2023-06-28',
229 sskind:'已审核',
230 htid:'HTO3',
231 paykind:'3期',
232 paybool:'未付款'
233 },{
234 ssid:'SSA5',
235 ssdate:'2023-06-27',
236 cstname:'王五',
237 cstpower:'C',
238 money:'2211',
239 gotime:'2023-06-28',
240 sskind:'已审核',
241 htid:'HTW3',
242 paykind:'6期',
243 paybool:'已付款'
244 },{
245 ssid:'SSA6',
246 ssdate:'2023-06-27',
247 cstname:'陈二',
248 cstpower:'A',
249 money:'2211',
250 gotime:'2023-06-28',
251 sskind:'已审核',
252 htid:'HTS1',
253 paykind:'3期',
254 paybool:'已付款'
255 }],
256 hdata:[], // 表单的表头
257 hdataget: [//表头源
258 {
259 prop:'ssid',
260 label:'订单号',
261 fixed:"left",
262 },{
263 prop:'cstname',
264 label:'客户名',
265 fixed:"left",
266 },{
267 prop:'cstpower',
268 label:'客户等级',
269 fixed:"left",
270 },{
271 prop:'money',
272 label:'金额',
273 fixed:false,
274 },{
275 prop:'ssdate',
276 label:'下单日期',
277 fixed:false,
278 },{
279 prop:'gotime',
280 label:'发货日期',
281 fixed:false,
282 },{
283 prop:'sskind',
284 label:'订单状态',
285 fixed:false,
286 },{
287 prop:'htid',
288 label:'合同号',
289 fixed:false,
290 },{
291 prop:'paykind',
292 label:'结算方式',
293 fixed:false,
294 },{
295 prop:'paybool',
296 label:'付款状态',
297 fixed:false,
298 }],
299 dataitems: [], //表单选中项
300 dataitem:[], //表单操作选择项
301 isload: false, //表单是否只展示加载图标
302
303 //是否打开表单
304 isadd:false,
305 isedit:false,
306 isloadup:false,
307 isloaddown:false,
308 isprg:false,
309 issee:false,
310 issethead:false,
311 }
312 },
313 created() {
314 console.log("dataget",this.dataget)
315 //下载数据
316 this.loadData()
317 //重新设置表头
318 this.$nextTick(() => {
319 this.setHead()
320 })
321 },
322 methods: {
323 datadel() {
324 //测试: 删除按钮能否对特定行操作 Notification
325 //不敢真的删了
326 this.$notify({
327 title:"删除",
328 message: this.dataitems,
329 type:'success'
330 })
331 },
332 //表单数据项选择
333 getItem(val) {
334 this.dataitems = val
335 },
336 //页面功能布置-表单行操作
337 OPENedit(val) {
338 this.isedit=true
339 this.dataitem=val
340 },
341 SBedit(val) {
342 this.isedit=false
343 this.dataitem=val
344 },
345 OPENsee(val) {
346 this.issee=true
347 this.dataitem=val
348 },
349 SBsee(val) {
350 this.issee=false
351 this.dataitem=val
352 },
353 OPENprg(val) {
354 this.isprg=true
355 this.dataitem=val
356 },
357 SBprg(val) {
358 this.isprg=false
359 this.dataitem=val
360 },
361 //传值事件
362 CTFsethead(val) {
363 if(isNullOrUndefined(val)){
364 this.$notify({
365 title:"表头设置运行结果",
366 message: "表头设置返回为空",
367 type:'info'
368 })
369 } else {
370 this.hdata=val
371 }
372 },
373 CTFadd(val) {
374 if(isNullOrUndefined(val)){
375 this.$notify({
376 title:"按钮添加项事件运行结果",
377 message: "添加项返回为空",
378 type:'info'
379 })
380 } else {
381 this.data.unshift(val)
382 }
383 },
384 CTFaddexcel(val){
385 if(isNullOrUndefined(val)){
386 this.$notify({
387 title:"按钮添加文件事件运行结果",
388 message: "添加项返回为空",
389 type:'info'
390 })
391 } else {
392 cnt=0
393 val.array.forEach(it => {
394 this.data.unshift(it)
395 cnt++
396 })
397 this.$notify({
398 title:"文件上传事件运行结果",
399 message: "文件上传成功，数据已添加 "+cnt+" 项",
400 type:'info'
401 })
402 }
403 },
404 CTFedit(val){
405 if(isNullOrUndefined(val)){
406 this.$notify({
407 title:"按钮编辑项事件运行结果",
408 message: "编辑项返回为空",
409 type:'info'
410 })
411 } else {
412 this.dataitem=val
413 //需要测试能否在table改变，不能的话遍历data改变。
414 }
415 },
416 search(val) { //返回查询结果data
417 if(isNullOrUndefined(val)){
418 this.$notify({
419 title:"按钮搜索事件运行结果",
420 message: "搜索返回为空",
421 type:'info'
422 })
423 } else {
424 this.data=val
425 }
426 },
427 //页面事件
428 loadData() { //表单刷新
429 //Todo
430 this.pageInfo.pageIndex=1
431 if(this.pageInfo.pageSize<this.dataget.length){
432 this.data=this.dataget.slice(0,this.pageInfo.pageSize)
433 }else{
434 this.data=this.dataget
435 }
436 },
437 setHead() { //表头刷新
438 //Todo
439 this.hdata=this.hdataget
440 },
441 PageChange(val) { //页数变化时触发
442 this.pageInfo.pageIndex=val
443 var bgn=(this.pageInfo.pageIndex-1)*this.pageInfo.pageSize
444 var end=bgn+this.pageInfo.pageSize
445 if(end>this.dataget.length){
446 end=this.dataget.length
447 }
448 this.data=this.dataget.slice(bgn,end)
449 console.log("tablePageInfo",this.pageInfo)
450 },
451 SizeChange(val) { //每页行数变化时触发
452 this.pageInfo.pageSize=val
453 this.pageInfo.pageIndex=1
454 if(this.pageInfo.pageSize<this.dataget.length){
455 this.data=this.dataget.slice(0,this.pageInfo.pageSize)
456 }else{
457 this.data=this.dataget
458 }
459 console.log("tablePageInfo",this.pageInfo)
460 },
461 }
462 }
463 </script>
464
465 <style lang="stylus" rel="stylesheet/stylus" scoped>
466 .normal-price {
467 width: 100%;
468 height: 100%;
469 }
470 </style>
没连数据库，用的测试数据。
发现代码有可以精简的地方，不过先把components下的补完再说。
标签：10,vue,false,val,记录,--,components,2023 From： https://www.cnblogs.com/yyn20230517/p/17514166.html