dataGrid

components/page/dataGrid.vue

 <template>
-  <div class="table-content">
+<div class="table-content">
     <div class="table-tools" v-if="tool">
         <div class="table-search">
             <slot name="easySearch" v-if="easy">
                 <Form inline>
                     <FormItem>
-              <Input
-                search
-                enter-button
-                :placeholder="placeholder"
-                @on-search="easySearch"
-                v-width="300"
-                v-model="keys"
-              />
+                        <Input search enter-button :placeholder="placeholder" @on-search="easySearch" v-width="300" v-model="keys" />
                     </FormItem>
                     <FormItem>
                         <Button v-if="high" @click="modalSearch=true" type="text">
@@ -42,40 +35,11 @@
             </slot>
             </Col>
         </Row>
-      <Table
-        v-else
-        :border="border"
-        :columns="columnsNow"
-        :data="list"
-        :height="tableHeight"
-        :draggable="draggable"
-        ref="table"
-        class="tableCommon"
-        @on-expand="expand"
-        @on-drag-drop="onDragDrop"
-        @on-selection-change="selectionChange"
-        @on-select="onSelect"
-        @on-select-all="allChange"
-        :row-key="rowKey"
-         stripe 
-      ></Table>
+        <Table v-else :border="border" :columns="columnsNow" :data="list" :height="tableHeight" :draggable="draggable" ref="table" class="tableCommon" @on-expand="expand" @on-drag-drop="onDragDrop" @on-selection-change="selectionChange" @on-select="onSelect" @on-select-all="allChange" :row-key="rowKey" stripe></Table>
     </div>
     <div class="table-footer">
         <slot name="footer"></slot>
-      <Page
-        v-if="page"
-        :total="search.total"
-        :current="search.page"
-        class="fr"
-        show-total
-        size="small"       
-        show-elevator
-        show-sizer
-        :page-size="search.pageSize"
-        :page-size-opts="pageSizeOpts"
-        @on-change="pageChange"
-        @on-page-size-change="pageSizeChange"
-      />
+        <Page v-if="page" :total="search.total" :current="search.page" class="fr" show-total size="small" show-elevator show-sizer :page-size="search.pageSize" :page-size-opts="pageSizeOpts" @on-change="pageChange" @on-page-size-change="pageSizeChange" />
     </div>
     <Modal v-if="high" v-model="modalSearch" title="高级搜索" draggable width="800" ref="search">
         <slot name="searchForm"></slot>
@@ -84,14 +48,7 @@
             <Button @click="complexSearch" type="primary" style="margin-left:10px;">查询</Button>
         </div>
     </Modal>
-    <Drawer
-      title="列设置"
-      v-if="set"
-      v-model="config"
-      :scrollable="true"
-      placement="left"
-      :mask="false"
-    >
+    <Drawer title="列设置" v-if="set" v-model="config" :scrollable="true" placement="left" :mask="false">
         <div slot="header">
             列设置
             <a @click="undoConfig" class="ml50">
@@ -99,11 +56,7 @@
             </a>
         </div>
         <ul class="table-columns">
-        <li
-          v-for="(li,index) in columnsCur"
-          :key="index"
-          v-dragging="{ item: li, list: columnsCur, group: 'li' }"
-        >
+            <li v-for="(li,index) in columnsCur" :key="index" v-dragging="{ item: li, list: columnsCur, group: 'li' }">
                 <label @click="columnChange(li,index)" :class="{dis:li.hide}">
                     <Icon :type="li.hide?'md-eye-off':'md-eye'" size="16" class="mr10" />
                     <span>{{li.title}}</span>
@@ -118,7 +71,7 @@
         <slot name="batch"></slot>
         <Button @click="cancelBatch">取消</Button>
     </FooterToolbar>
-  </div>
+</div>
 </template>
 
 <script>
@@ -363,8 +316,7 @@ export default {
         },
         loadUserConfig() {
             var query = {
-        conditions: [
-          {
+                conditions: [{
                         fieldName: "creatorUserId",
                         fieldValue: this.userId,
                         conditionalType: "Equal",
@@ -604,11 +556,42 @@ export default {
                 });
                 list.forEach((e) => {
                     //给导出数据增加数据字典对应的name
-          tempCol.forEach((ele) => {
-            e[ele.key] = this.$u.dirName(
-              this.$store.getters.dictionaryByKey(ele.code),
-              e[ele.key]
+                    // tempCol.forEach((ele) => {
+                    //     e[ele.key] = this.$u.dirName(
+                    //         this.$store.getters.dictionaryByKey(ele.code),
+                    //         e[ele.key]
+                    //     );
+                    // });
+                    tempCol.forEach((elem) => {
+                        if (
+                            e[elem.key] &&
+                            e[elem.key] != "" &&
+                            e[elem.key] != null
+                        ) {
+                            //如果数据字典项对应的DirName字段存在，通过name查询到对应的code，然后赋值。
+                            let codeArr = []
+                            let keyValue = e[elem.key]
+                            if (keyValue.length > 0 && (keyValue.indexOf(',') > -1 || keyValue.indexOf('，') > -1)) { //如果对应的数据包含多个数据字典项，比如包含“，”或“,”
+                                if (keyValue.indexOf(',') > -1) {
+                                    codeArr = keyValue.split(',')
+                                }
+                                if (keyValue.indexOf > -1) {
+                                    codeArr = keyValue.split('，')
+                                }
+                            }
+                            if (codeArr.length <= 1) { //对应的数据包含一个数据字典项
+                                e[elem.key] = this.$u.dirName(
+                                    this.$store.getters.dictionaryByKey(elem.code),
+                                    e[elem.key]
                                 );
+                            } else { //对应的数据包含多个数据字典项
+                                let codeInfo = ''
+                                codeArr.forEach(el => {
+                                    codeInfo = codeInfo + this.$u.dirName(this.$store.getters.dictionaryByKey(elem.code), el) + ",";
+                                })
+                                e[elem.key] = codeInfo.substr(0, codeInfo.length - 1)
+                            }
+                        }
                     });
                     //导出数据增加对应的物料管理信息 code： 1【rootCategoryId 大类】  2【categoryId 大类】  3【codeRuleId 编码名称】
                     tempCol1.forEach((elcol1) => {
@@ -793,6 +776,7 @@ export default {
 
 <style lang="less">
 @import "../../assets/css/custom.less";
+
 .table-content {
     position: relative;
     height: 100%;
@@ -831,6 +815,7 @@ export default {
         display: flex;
         line-height: 50px;
         background: @right-header-bg;
+
         .table-search {
             flex-grow: 1;
         }