current position:Home>On the problem of incomplete display of Vue multi selection box data
On the problem of incomplete display of Vue multi selection box data
2022-02-02 11:50:18 【CSDN Q & A】
As shown in the figure
<template> <div> <div v-if="flag" class="app-container"> <el-card class="box-card"> <el-form :model="queryParams" ref="queryForm" label-width="120px" size="small"> <el-row :gutter="20"> <el-col :xs="12" :md="8" :lg="8"> <el-form-item label=" state " prop="configName"> <el-select style="width:100%" v-model="queryParams.status" placeholder=" Please select " clearable size="small"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> </el-form-item> </el-col> <el-col :xs="12" :md="8" :lg="8"> <el-form-item label=" You can query the enterprise code " prop="configName" > <el-select style="width:100%" v-model="queryParams.selTradeCode" placeholder=" Please select " size="small"> <el-option v-for="item in etpsNoOptions" :key="item.codee" :label="item.label" :value="item.code" /> </el-select> </el-form-item> </el-col> <el-col :xs="12" :md="8" :lg="8"> <el-form-item label=" Processing trade manual No " prop="configName"> <el-input v-model="queryParams.emlNo" /> </el-form-item> </el-col> <el-col :md="24" :lg="8"> <el-form-item label=" Entry date "> <el-date-picker v-model="queryParams.inputDateStart" value-format="yyyy-MM-dd" type="date" placeholder=" Start date " :picker-options="pickerOptions"></el-date-picker> - <el-date-picker v-model="queryParams.inputDateEnd" value-format="yyyy-MM-dd" type="date" placeholder=" End date " :picker-options="pickerOptions"></el-date-picker> </el-form-item> </el-col> <el-col :xs="12" :md="8" :lg="8"> <el-form-item label=" The unified number of the entry " prop="configName"> <el-input v-model="queryParams.seqNo" /> </el-form-item> </el-col> </el-row> </el-form> <el-row :gutter="10" class="mb8"> <el-col style="text-align: center;"> <el-button type="primary" icon="el-icon-refresh" @click="handleQuery" :disabled="disabled"> Data synchronization </el-button> </el-col> </el-row> </el-card> <el-card class="box-card"> <el-row type="flex" justify="space-between" :gutter="10" class="mb8"> <el-col :span="16"> <el-form :inline=!0 style="pad"> <el-form-item label=" Task status "> <el-select style="width:100%" v-model="form.status" placeholder=" Please select " clearable size="small"> <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> </el-form-item> <el-form-item> <el-button type="primary" icon="el-icon-search" size="mini" @click="getList" :disabled="disabled"> Refresh </el-button> </el-form-item> </el-form> </el-col> </el-row> <el-table border stripe v-loading="loading" :data="configList" @selection-change="handleSelectionChange" @row-dblclick="handleDblclick" @sort-change="sortChange" highlight-current-row> <el-table-column width="55" type="selection" align="center" fixed="left"/> <el-table-column width="55" label=" Serial number " align="center" type="index" fixed="left"/> <template v-for="(col,ck) in tableColumn"> <el-table-column :key="ck" v-if=col.isShow :label=col.label :prop=col.prop :width=col.width :type=col.type :align=col.align :fixed=col.fixed?col.fixed:false sortable="custom" :show-overflow-tooltip=col.showOverflowTooltip :formatter=col.formatter> </el-table-column> </template> <el-table-column label=" Mission parameters " align="center" prop="cnParam" :show-overflow-tooltip="true"/> <el-table-column width="150" label=" operation " align="center" fixed="right"> <template slot-scope="scope"> <el-button v-if="scope.row.status != 2" size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"> Delete </el-button> <el-button v-if=" scope.row.status != 4 && scope.row.status != 1 && scope.row.status != 5 " size="mini" type="text" icon="el-icon-delete" @click="handleStop(scope.row)"> End </el-button> </template> </el-table-column> </el-table> <pagination v-show="total > 0" :total="total" :page.sync="form.pageNum" :limit.sync="form.pageSize" @pagination="getList"/> </el-card> <el-card class="box-card"> <el-row type="flex" justify="space-between" :gutter="10" class="mb8"> <el-col :span="16"> <el-form :inline=!0 style="pad"> <el-form-item label=" Subtask details "> <el-select style="width:100%" v-model="form.status" placeholder="" clearable size="small"> <el-option v-for="item in statusOptions1" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> </el-form-item> <el-button type="primary" icon="el-icon-search" size="mini" @click="getSubDcrDetail" :disabled="disabled"> Refresh </el-button> </el-form> </el-col> </el-row> <el-table border stripe v-loading="loading" :data="configList" @selection-change="handleSelectionChange" @row-dblclick="handleDblclick" @sort-change="sortChange" highlight-current-row> <template v-for="(col,ck) in tableColumn1"> <el-table-column :key="ck" v-if=col.isShow :label=col.label :prop=col.prop :width=col.width :type=col.type :align=col.align :fixed=col.fixed?col.fixed:false sortable="custom" :show-overflow-tooltip=col.showOverflowTooltip> </el-table-column> </template> <el-table-column width="120" label=" operation " align="center"> <template slot-scope="scope"> <el-button v-if="scope.row.isRetry != 1 && scope.row.status == 4" size="mini" type="text" icon="el-icon-refresh" @click="handleRetry(scope.row)" > restart </el-button> <el-button v-if="scope.row.status != 2" size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" > Delete </el-button> </template> </el-table-column> </el-table> </el-card> </div> </div></template><script>import { queryUserconfig,saveUserconfig } from "@/api/ltd";import { syncDcrData, getList, deldec,updateStatus,getEmlList } from "@/api/sync/sync";import { getUserProfile } from "@/api/system/user";import { getSubList } from "@/api/sub/sub" import { parseTime } from "@/utils/common";export default { name: "SyncDcr", data() { return { activeName: "0", // mask loading: true, // Select array ids: [], emsNo: "", emsNos: [], // Non single disabled single: true, // Non multiple disabled multiple: true, // Show search criteria showSearch: false, // Total number of articles total: 0, // Parameter table data configList: [], // Pop up layer title title: "", // Show pop-up layer or not open: false, disabled: false, // Type data dictionary typeOptions: [], etpsNoOptions: [], // Query parameters queryParams: { pageNum: 1, pageSize: 10, seqNo: undefined, emlNo: undefined, selTradeCode: undefined, status: " ", inputDateEnd: parseTime( new Date( new Date().getFullYear(), new Date().getMonth(), new Date().getDate() ) ), inputDateStart:"2018-01-01" }, options: this.ENUM_DATA.DATA_STATUS, statusOptions: [ { label: " All ", value: "" }, { label: " newly build ", value: "0" }, { label: " Task to complete ", value: "1" }, { label: " In execution ", value: "2" }, { label: " Execution failure ", value: "4" }, { label: " Termination of execution ", value: "5" } ], statusOptions1:[ { label: " all ", value: "" }, { label: " To be processed ", value: "0" }, { label: " Has been sent ", value: "1" }, { label: " Handle a successful ", value: "2" }, { label: " End ", value: "4" }, { label: " abnormal ", value: "5" } ], form: { type: 2, pageNum: 1, pageSize: 10, status:"" }, flag: true, pickerOptions: {
disabledDate(time) { return time.getTime() > Date.now();}}, value1: "", value2: "", user: { dept: {} }, isVrfdedMarkcd: false, isStatus: false, visiblePopover:false, tableColumn:[ {
isShow:true,width:"150",label:" Enterprise code ",align:"center",prop:"orgCusCode",fixed:"left",}, {
isShow:true,width:"100",label:" Task status ",align:"center",prop:"status",fixed:"left",}, //{isShow:true,width:"200",label:" Task information ",align:"center",prop:"resultInfo",fixed:"left",showOverflowTooltio:true}, //{isShow:true,width:"200",label:" Mission parameters ",align:"center",prop:"cnParam",showOverflowTooltio:true}, {
isShow:true,width:"150",label:" Creation time ",align:"center",prop:"createTime",}, {
isShow:true,width:"150",label:" Completion time ",align:"center",prop:"completeTime",showOverflowTooltio:true,fixed:"right"}, {
isShow:true,width:"150",label:" Operator ",align:"center",prop:"createUser",fixed:"right"}, ], tableColumn1:[ {
isShow:true,width:"220",label:" Task number ",align:"center",prop:"id",}, {
isShow:true,width:"220",label:" Unified numbering ",align:"center",prop:"",}, {
isShow:true,width:"220",label:" Data status ",align:"center",prop:"dataStatus"}, {
isShow:true,width:"220",label:" Operation type ",align:"center",prop:""}, {
isShow:true,width:"150",label:" Task status ",align:"center",prop:""}, {
isShow:true,width:"200",label:" Task information ",align:"center",prop:""}, {
isShow:true,width:"200",label:" Completion time ",align:"center",prop:""}, ] }; }, created() { this.getUser(); this.getList(); this.getEmlNoList(); }, components: { parseTime }, methods: { getList() { this.loading = true; getList(this.form).then(res => { if(res.rows.length > 0){ this.configList = res.rows.map((v,i,a)=>{ v.status = this.statusFormat(v) return v; }); this.total = res.total; } this.loading = false; }).catch((err)=>{
this.loading = false;}); }, sortChange(e){
// Trigger sort event e let order = { "ascending":"asc", "descending":"desc" }[e.order] if(e.order){ this.form.orderByColumn = e.prop + ' ' + order; this.getList(); }else{ this.form.orderByColumn = ''; this.getList(); } // At present, only single sequence is considered , But not necessarily useful }, saveTableConfig(){ let json = { cfgKey:this.$route.meta.title, cfgVal:JSON.stringify(this.tableColumn) } saveUserconfig(json).then((res)=>{ if(res.code==200){ this.$message(res.msg); this.visiblePopover = false; } }) },// Save user configuration moveUp(idx){ if(idx == 0){
return} let index2 = idx; let index1 = idx - 1; let array = this.tableColumn; array.splice(index2,1,...array.splice(index1, 1 , array[index2])); },/** some popover Required sequence adjustment function */ getEmlNoList() { queryUserconfig({
// Read user configuration cfgKey:this.$route.meta.title }).then(res=>{ if(res.data.cfgVal){ this.tableColumn = JSON.parse(res.data.cfgVal) } }).catch((err)=>{ }) this.loading = false; }, /** Query parameter list */ syncMessage() { this.loading = true; syncDcrData(this.queryParams) .then(res => { this.disabled = true; this.loading = true; this.msgSuccess(res.msg); this.loading = false; this.getList(); this.disabled = false; }) .catch(function() { this.msgError(res.msg); }); }, // Post translation dictionary statusFormat(row, column) { return this.selectLabel(this.statusOptions, row.status); }, // Cancel button cancel() { this.open = false; this.reset(); }, // Form reset reset() { this.form = { configId: undefined, configName: undefined, configKey: undefined, configValue: undefined, configType: "Y", remark: undefined }; this.resetForm("form"); }, /** Search button operation */ handleQuery() { this.loading = false; this.queryParams.pageNum = 1; this.syncMessage(); this.getList(); this.loading = true; }, /** Reset button operation */ resetQuery() { this.dateRange = []; this.resetForm("queryForm"); this.handleQuery(); }, // Select the data in the multi check box handleSelectionChange(selection) { this.ids = selection.map(item => item.configId); this.emsNo = selection.map(item => item.emsno); this.single = selection.length != 1; this.multiple = !selection.length; }, /** Row double click **/ // handleDblclick(row) {
// this.flag = false; // this.$refs.detail.show(row.id, row.emsno); // }, handleClick(row) { this.queryParams.status = row.name; this.getList(); }, /** return **/ goBack() { this.flag = true; }, getUser() { getUserProfile().then(response => { this.user = response.data; this.roleGroup = response.roleGroup; this.postGroup = response.postGroup; // this.queryParams.selTradeCode = this.user.dept.orgCusCode; }); }, handleStop(row) { this.loading = false; this.$confirm(" Are you sure to terminate the operation ?", " Warning ", { confirmButtonText: " determine ", cancelButtonText: " Cancel ", type: "warning" }) .then(function() { row.status = 5; return updateStatus(row); }) .then(() => { this.getList(); this.msgSuccess(" Successful operation "); }) .catch(function() {}); }, handleDelete(row) { //this.loading = false; this.$confirm(" Are you sure you want to delete ?", " Warning ", { confirmButtonText: " determine ", cancelButtonText: " Cancel ", type: "warning" }) .then(function() { row.deleted = 1; return deldec(row.id); }) .then(() => { this.getList(); this.msgSuccess(" Delete successful "); }) .catch(function() {}); }, getEmlNoList() { this.loading = false; getEmlList().then(res => { this.etpsNoOptions = res.data; }); }, }};</script>
Refer to the answer 1:
Don't you have only one piece of data
Refer to the answer 2:
Refer to the answer 3:
label It's the name of the display ,value Is the corresponding value , If you want to display multiple , Use one list
Refer to the answer 4:
copyright notice
author[CSDN Q & A],Please bring the original link to reprint, thank you.
https://en.primo.wiki/2022/02/202202021150162532.html
The sidebar is recommended
- How to read text from TXT document, write it into excel and run it in reverse?
- Calculation of joint torque of detal manipulator
- Give a string representing the date and ask what day of the year it is
- [Vue] setting @ media to query font size is not effective
- How to use the ecarts national map to the city? I CV changed other people's codes and key values. Now this is the case
- Hbuilderx
- Design database (agricultural products sales database, clothing sales database and stamen sales database)
- Let's see if the course sequence of distributed architect is correct
- What's the matter with me? Please answer
- Link failure of distributed task scheduling
guess what you like
-
The bean tag calls auto assembly and has been given a parameterless construction Setget, why is class still null
-
"The column vectors of a matrix whose determinant is equal to zero may not be linearly correlated"
-
PTA 7-1 string sorting (10 points)
-
Output the full arrangement of all 1 2 3 4 5 in dictionary order
-
How to create SQL trigger
-
Stm32tftlcd displays Chinese character scrolling
-
The format of the command in the CMD window is unclear
-
What does the class name in the class mean? It's not a variable or a member function
-
Seems to have started a program called [com,.] Process. But failed to stop it, which is likely to cause a memory leak. Stack trace for Thread:
-
Object oriented programming questions
Random recommended
- What are the impossible out of stack sequences when a certain in stack sequence is CADB?
- How to do this!
- Given a matrix of N x n, find the matrix after 90 degrees of rotation
- Mac Pro M1 chip 13 inch how to delete non store software?
- Is there any student to answer the single linked list in the data structure
- About the problem of incomplete data acquisition in Vue's select multiple selection box