On the problem of incomplete display of Vue multi selection box data

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>