文章目录

Ant-Design-Vue开发配置记录

一、实现筛选框：支持下拉搜索+下拉多选+表字典(支持条件查询)功能

JSearchMultiSelectTag.vue源文件

1.需求介绍

在使用JeectBoot(ant-design-vue)设计表单时，需要实现下拉搜索+下拉多选+表字典(支持条件查询)。

但是系统目前有两个组件分别是JMultiSelectTag和JSearchSelectTag。经测试发现：1.JMultiSelectTag支持下拉多选+支持表字典(不支持条件查询)。2.JSearchSelectTag支持下拉搜索+表字典(支持条件查询)。所以两者都不能满足。

因为在需求中主要以下拉搜索和表字典(支持条件查询为主)，所以选择在JSearchSelectTag的基础上进行调整，从而实现需求内容。

2.代码逻辑调整

2.1 复制JMultiSelectTag.vue文件

1）复制src/components/dict/JMultiSelectTag.vue目录的文件，然后重命名为JSearchMultiSelectTag.vue

在这里插入图片描述

2）修改组件名称

因为文件是直接复制来的，所以需要将名称改成自定义的组件名称JSearchMultiSelectTag

在这里插入图片描述

2.2 修改template部分

在a-select标签内添加mode="multiple"，即为添加多选的属性。因为不需要做大量的数据缓存，所以同步异步也是相差不大，即可以调整如下:value="selectedValue",@change="onChange"

<template>

  <a-select
    v-if="async"
    mode="multiple"
    showSearch
    labelInValue
    :disabled="disabled"
    :getPopupContainer="getParentContainer"
    @search="loadData"
    :placeholder="placeholder"
    :value="selectedValue"
    v-model="selectedAsyncValue"
    style="width: 100%"
    :filterOption="false"
    @change="onChange"
    allowClear
    :notFoundContent="loading ? undefined : null"
  >
    <a-spin v-if="loading" slot="notFoundContent" size="small"/>
    <a-select-option v-for="d in options" :key="d.value" :value="d.value">{{ d.text }}</a-select-option>
  </a-select>

  <a-select
    v-else
    mode="multiple"
    :getPopupContainer="getParentContainer"
    showSearch
    :disabled="disabled"
    :placeholder="placeholder"
    :value="selectedValue"
    optionFilterProp="children"
    style="width: 100%"
    @change="onChange"
    :filterOption="filterOption"
    v-model="selectedValue"
    allowClear
    :notFoundContent="loading ? undefined : null">
    <a-spin v-if="loading" slot="notFoundContent" size="small"/>
    <a-select-option v-for="d in options" :key="d.value" :value="d.value">{{ d.text }}</a-select-option>
  </a-select>

</template>

2.3 修改props部分

将props中的value类型改为string

    props:{
      disabled: Boolean,
      value: String,
      dict: String,
      dictOptions: Array,
      async: Boolean,
      placeholder:{
        type:String,
        default:"请选择",
        required:false
      },
      popContainer:{
        type:String,
        default:'',
        required:false
      },
      pageSize:{
        type: Number,
        default: 10,
        required: false
      },
      getPopupContainer: {
        type:Function,
        default: null
      },
    },

2.4 修改watch部分

监听输入框输入的value时，判断val为空时赋值SelectValue为空值，有输入值就取initSelectValue请求接口。

watch:{
      "value":{
        immediate:true,
        handler(val){
          if(!val){
              this.selectedValue=[]
              this.selectedAsyncValue=[]
          }else{
            this.initSelectValue()
          }
        }
      },
      "dict":{
        handler(){
          // this.initDictData()
          this.initSelectValue()
        }
      },
      'dictOptions':{
        deep: true,
        handler(val){
          if(val && val.length>0){
            this.options = [...val]
          }
        }
      }
    },

2.5 修改initSelectValue部分

methods中初始化选择框里的数据方法，查询较快，返回的数据会以逗号作为分隔符分割成数组，便利到options数组中，作为a-select-option中选项。

      initSelectValue(){
        getAction(`/sys/dict/loadDictItem/${this.dict}`,{key:this.value}).then(res=>{
          if(res.success){
            let valueArr = this.value.split(',')
            this.options = []
            for(let r=0;r<res.result.length;r++){
              let obj = {
                value:valueArr[r],
                text:res.result[r]
              }
              this.options.push(obj)
              tis.selectedValue = valueArr
            }
          }
        })
      },

2.6 修改onChange部分

@onChange="onChange"，当输入框有变化时，就可以自己根据需求将已选中的数据以逗号作为分隔符以字符串保存起来。

      onChange (selectedValue) {
        this.$emit('change', selectedValue.join(","));
      },

3.应用JSearchMultiSelectTag组件

3.1 导入JSearchMultiSelectTag组件

在这里插入图片描述

3.2 应用JSearchMultiSelectTag组件

<j-search-multi-select-tag placeholder="请选择" v-model="queryParam.factory" dict="表名称(可加查询条件),字段名,字段名"></j-search-multi-select-tag>

注意：使用这种方法需要注意的是，表字典用到的表必须是数据库中实际存在的。

在这里插入图片描述

4.测试JSearchMultiSelectTag组件功能

4.1 下拉多选功能

在这里插入图片描述

4.2 下拉搜索功能

在这里插入图片描述

二、识别字段中指定内容并修改该行文字颜色

需求：将生产工厂是配件工厂的行改变颜色标注

在这里插入图片描述

1.修改table组件内容

在<a-table></a-table>内添加:rowClassName="tableRowClass"

<a-table>
    ...
	:rowClassName="tableRowClass"
    ...
</a-table>

2.修改methods方法

在methods方法中添加tableRowClass方法，主要用于逻辑处理，判断该行是否需要改变颜色。其中factory是字段名称，如果是需要修改的行，则返回rowClass。

tableRowClass(record){
    if(record.factory == '配件工厂'){
        return "rowClass";
    }else {
        return "";
    }
}

3. CSS添加rowClass

注意：rowClass不要写在<style scoped></style>里

<style>
  .rowClass {
    color: blue;
  }
</style>

以上步骤都处理完后再运行就可以看到颜色已经改变：

在这里插入图片描述

三、实现表单页面缓存(keep-alive)

1.keep-alive介绍

keep-alive是vue的一个内置实例，通过这个属性可以缓存组件的v-node，可以实现页面缓存的功能。

keep-alive有三个属性：

  • 1.include：记录了哪些组件可以被缓存
  • 2.exclude：记录了哪些组件不能被缓存
  • 3.max：记录的是可以缓存组件的最大数量

除此之外，keep-alive还提供了两个生命周期钩子函数：

  • 1.actived：在激活的时候使用，第一次激活是在mounted之后执行
  • 2.dectived：在失活的时候使用

2.代码逻辑调整

2.1 调整前

在RouteView.vue文件中，keepalive定义了只能记录在includedComponents的表单可以被缓存。但是要遵守jeecgboot的命名规则。如果要实现对有表单页面缓存的话，可以调整keepalive。

注意：但是该方法只适合layouts/RouteView组件，不适合layouts/IframePageView。因为iframe页的内容不属于节点的信息，所以使用keepalive依然会重新渲染iframe的内容。而且iframe每一次渲染就相当于打开一个新的网页窗口，即使把节点保存下来，在渲染的时候还是会刷新。

在这里插入图片描述

2.2 调整后

使用keep-alive标签包裹router-view就可以实现全部缓存

    <keep-alive>
      <router-view></router-view>
    </keep-alive>

在这里插入图片描述

# java # anti-design-vue
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue