Jeecg-Boot 2.2.0 版本发布 | 重磅升级

ant-design-vue-jeecg/src/components/jeecgbiz/JSelectBizComponent/JSelectBizComponentModal.vue

@@ -63,12 +63,14 @@
 
 <script>
   import { getAction } from '@/api/manage'
+  import Ellipsis from '@/components/Ellipsis'
   import { JeecgListMixin } from '@/mixins/JeecgListMixin'
   import { cloneObject, pushIfNotExist } from '@/utils/util'
 
   export default {
     name: 'JSelectBizComponentModal',
     mixins: [JeecgListMixin],
+    components: { Ellipsis },
     props: {
       value: {
         type: Array,
@@ -128,12 +130,15 @@
         type: String,
         default: 'id'
       },
+      // 过长裁剪长度，设置为 -1 代表不裁剪
+      ellipsisLength: {
+        type: Number,
+        default: 12
+      },
     },
     data() {
       return {
         innerValue: [],
-        // 表头
-        innerColumns: this.columns,
         // 已选择列表
         selectedTable: {
           pagination: false,
@@ -147,6 +152,7 @@
           ],
           dataSource: [],
         },
+        renderEllipsis: (value) => (<ellipsis length={this.ellipsisLength}>{value}</ellipsis>),
         url: { list: this.listUrl },
         /* 分页参数 */
         ipagination: {
@@ -164,6 +170,19 @@
         dataSourceMap: {},
       }
     },
+    computed: {
+      // 表头
+      innerColumns() {
+        let columns = cloneObject(this.columns)
+        columns.forEach(column => {
+          // 给所有的列加上过长裁剪
+          if (this.ellipsisLength !== -1) {
+            column.customRender = (text) => this.renderEllipsis(text)
+          }
+        })
+        return columns
+      },
+    },
     watch: {
       value: {
         deep: true,

ant-design-vue-jeecg/src/components/jeecgbiz/JSelectBizComponent/README.md

@@ -29,7 +29,7 @@ export default {
 | selectButtonText      | String  |      | "选择"       | 选择按钮的文字                                                                       |
 | queryParamText        | String  |      | null         | 查询条件显示文字，不传则使用 `name`                                                  |
 | columns               | Array   | 是   |              | 列配置项，与antd的table的配置完全一致。列的第一项会被配置成右侧已选择的列表上        |
-| columns[0].widthRight | Array   |      | null         | 仅列的第一项可以应用此配置，表示右侧已选择列表的宽度，建议 `70%`，不传则应用`width`  |
+| columns[0].widthRight | String   |      | null         | 仅列的第一项可以应用此配置，表示右侧已选择列表的宽度，建议 `70%`，不传则应用`width`  |
 | placeholder           | String  |      | "请选择"     | 占位符                                                                               |
 | disabled              | Boolean |      | false        | 是否禁用                                                                             |
 | multiple              | Boolean |      | false        | 是否可多选                                                                           |

ant-design-vue-jeecg/src/components/jeecgbiz/JSelectBizComponent/index.vue

@@ -9,8 +9,9 @@
           :options="selectOptions"
           allowClear
           :disabled="disabled"
-          :open="false"
+          :open="selectOpen"
           style="width: 100%;"
+          @dropdownVisibleChange="handleDropdownVisibleChange"
           @click.native="visible=(buttons?visible:true)"
         />
       </slot>
@@ -85,7 +86,8 @@
         selectValue: [],
         selectOptions: [],
         dataSourceMap: {},
-        visible: false
+        visible: false,
+        selectOpen: false,
       }
     },
     computed: {
@@ -128,6 +130,13 @@
         this.selectOptions = options
         this.dataSourceMap = dataSourceMap
       },
+      handleDropdownVisibleChange() {
+        // 解决antdv自己的bug —— open 设置为 false 了，点击后还是添加了 open 样式，导致点击事件失效
+        this.selectOpen = true
+        this.$nextTick(() => {
+          this.selectOpen = false
+        })
+      },
     }
   }
 </script>
@@ -142,7 +151,7 @@
     }
 
     .right {
-      width: @width ;
+      width: @width;
     }
 
     .full {
@@ -150,7 +159,7 @@
     }
 
     /deep/ .ant-select-search__field {
-        display: none !important;
-      }
+      display: none !important;
+    }
   }
 </style>