JeecgBoot实战—前端Ant-Design-Vue专题

已于 2022-02-21 20:33:39 修改
阅读量4.5k 收藏 23
点赞数 1
文章标签： vue.js 前端 javascript
于 2022-02-21 08:00:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Java_Fly1/article/details/123023406
版权

这里写目录标题

时间组件

j-date基本使用

j-date是JeecgBoot基于a-date-picker封装的时间组件

在这里插入图片描述
在这里插入图片描述

局部使用组件

<template>
  <a-card :bordered="false">
    <j-date v-model="dateStr" placeholder="请选择"></j-date>
  </a-card>
</template>

<script>
<!--  局部组件引入JDate-->
  import JDate from '@/components/jeecg/JDate'
  export default {
    name: 'List',
    components:{
      JDate
    },
    data(){
      return{
        dateStr:null
      }
    }
  }
</script>

<style scoped>

</style>

全局使用j-date组件

j-date源码

<template>
  <a-date-picker
    dropdownClassName="j-date-picker"
    :disabled="disabled || readOnly"
    :placeholder="placeholder"
    @change="handleDateChange"
    :value="momVal"
    :showTime="showTime"
    :format="dateFormat"
    :getCalendarContainer="getCalendarContainer"
    v-bind="$attrs"/>
</template>
<script>
  import moment from 'moment'
  export default {
    name: 'JDate',
    props: {
      placeholder:{
        type: String,
        default: '',
        required: false
      },
      value:{
        type: String,
        required: false
      },
      dateFormat:{
        type: String,
        default: 'YYYY-MM-DD',
        required: false
      },
      //此属性可以被废弃了
      triggerChange:{
        type: Boolean,
        required: false,
        default: false
      },
      readOnly:{
        type: Boolean,
        required: false,
        default: false
      },
      disabled:{
        type: Boolean,
        required: false,
        default: false
      },
      showTime:{
        type: Boolean,
        required: false,
        default: false
      },
      getCalendarContainer: {
        type: Function,
        default: (node) => node.parentNode
      }
    },
    data () {
      let dateStr = this.value;
      return {
        decorator:"",
        momVal:!dateStr?null:moment(dateStr,this.dateFormat)
      }
    },
    watch: {
      value (val) {
        if(!val){
          this.momVal = null
        }else{
          this.momVal = moment(val,this.dateFormat)
        }
      }
    },
    methods: {
      moment,
      handleDateChange(mom,dateStr){
        this.$emit('change', dateStr);
        console.log(dateStr)
      }
    },
    //2.2新增 在组件内定义 指定父组件调用时候的传值属性和事件类型 这个牛逼
    model: {
      prop: 'value',
      event: 'change'
    }
  }
</script>

在这里插入图片描述
开始使用组件

<template>
  <a-card :bordered="false">
    <j-date v-model="dateStr" placeholder="请选择"></j-date>
  </a-card>
</template>

<script>
  export default {
    name: 'List',
    data(){
      return{
        dateStr:null
      }
    }
  }
</script>

<style scoped>

</style>

a-date-picker基本使用

官网介绍

Input

基本使用

官网介绍

<template>
  <a-card :bordered="false">
    <div>
      <a-input v-model="str" @change="showStr" allowClear placeholder="请输入"  />
      {{str}}
    </div>
    <div>
      <!--默认值-->
      <a-input  allowClear placeholder="请输入" :default-value="defaultStr" />
    </div>
  </a-card>
</template>

<script>
  export default {
    name: 'List',
    data(){
      return{
        str:null,
        defaultStr:'123'
      }
    },
    methods:{
      showStr(e){
        console.log('改变的值')
        console.log(e.target.value)
        this.str = e.target.value
      }
    }
  }
</script>

<style scoped>

</style>

select

官网介绍

基本使用

<template>
  <a-card :bordered="false">
    <a-select default-value="lucy" style="width: 120px" @change="handleChange">
      <a-select-option value="jack">
        Jack
      </a-select-option>
      <a-select-option value="lucy">
        Lucy
      </a-select-option>
      <a-select-option value="disabled" disabled>
        Disabled
      </a-select-option>
      <a-select-option value="Yiminghe">
        yiminghe
      </a-select-option>
    </a-select>
  </a-card>
</template>

<script>
  export default {
    name: 'List',
    data(){
      return{
      }
    },
    methods:{
      handleChange(value) {
        console.log(`selected ${value}`);
      },
    }
  }
</script>

<style scoped>

</style>

测试结果
在这里插入图片描述
在这里插入图片描述
选择了yiminghe
在这里插入图片描述

v-for遍历创建a-select

<template>
  <a-card :bordered="false">
    <a-select  style="width: 120px" @change="handleChange" allowClear >
      <a-select-option v-for="(item,index) in options" :key="index" :value="item.value">{{item.text}}</a-select-option>
    </a-select>
  </a-card>
</template>

<script>
  export default {
    name: 'List',
    data(){
      return{
        options:[]
      }
    },
    mounted() {
      this.loadOptions()
    },
    methods:{
      loadOptions(){
        this.options=[
          {
            text:'Jack',
            value:'Jack'
          },
          {
            text:'Linda',
            value:'Linda'
          },
          {
            text:'Lucy',
            value:'Lucy'
          }
        ]
      },
      handleChange(value) {
        console.log(`selected ${value}`);
      },
    }
  }
</script>

<style scoped>

</style>

v-model

<template>
  <a-card :bordered="false">
    <a-select  style="width: 120px" @change="handleChange" allowClear v-model="selectVal" >
      <a-select-option v-for="(item,index) in options" :key="index" :value="item.value">{{item.text}}</a-select-option>
    </a-select>
    我是被选中的value:{{selectVal}}
  </a-card>
</template>

<script>
  export default {
    name: 'List',
    data(){
      return{
        options:[],
        selectVal:null,
      }
    },
    mounted() {
      this.loadOptions()
    },
    methods:{
      loadOptions(){
        this.options=[
          {
            text:'Jack',
            value:'Jack'
          },
          {
            text:'Linda',
            value:'Linda'
          },
          {
            text:'Lucy',
            value:'Lucy'
          }
        ]
      },
      handleChange(value) {
        console.log(`selected ${value}`);
      },
    }
  }
</script>

<style scoped>

</style>

在这里插入图片描述

disabled

<template>
  <a-card :bordered="false">
    <!--disabled:禁止下拉选进行选择，:disabled="true|false"动态绑定，控制是否禁用-->
    <a-select  style="width: 120px" @change="handleChange" allowClear v-model="selectVal" disabled>
      <a-select-option v-for="(item,index) in options" :key="index" :value="item.value">{{item.text}}</a-select-option>
    </a-select>
    我是被选中的value:{{selectVal}}
  </a-card>
</template>

<script>
  export default {
    name: 'List',
    data(){
      return{
        options:[],
        selectVal:null,
      }
    },
    mounted() {
      this.loadOptions()
    },
    methods:{
      loadOptions(){
        this.options=[
          {
            text:'Jack',
            value:'Jack'
          },
          {
            text:'Linda',
            value:'Linda'
          },
          {
            text:'Lucy',
            value:'Lucy'
          }
        ]
      },
      handleChange(value) {
        console.log(`selected ${value}`);
      },
    }
  }
</script>

<style scoped>

</style>

测试结果
在这里插入图片描述

defaultValue和change

<template>
  <a-card :bordered="false">
    <!--@change事件-->
    <a-select  style="width: 120px" @change="handleChange" allowClear  :defaultValue="defaultValue">
      <a-select-option v-for="(item,index) in options" :key="index" :value="item.value">{{item.text}}</a-select-option>
    </a-select>
  </a-card>
</template>

<script>
  export default {
    name: 'List',
    data(){
      return{
        options:[],
        defaultValue:'Jack'
      }
    },
    mounted() {
      this.loadOptions()
    },
    methods:{
      loadOptions(){
        this.options=[
          {
            text:'Jack',
            value:'Jack'
          },
          {
            text:'Linda',
            value:'Linda'
          },
          {
            text:'Lucy',
            value:'Lucy'
          }
        ]
      },
      handleChange(value) {
        console.log(`selected ${value}`);
      },
    }
  }
</script>

<style scoped>

</style>

测试
在这里插入图片描述

mode=“multiple”

下拉选支持多选
官网介绍

<template>
  <a-card :bordered="false">
    <!--@change事件-->
    <a-select  style="width: 120px" @change="handleChange" allowClear mode="multiple" v-model="str">
      <a-select-option v-for="(item,index) in options" :key="index" :value="item.value">{{item.text}}</a-select-option>
    </a-select>
  </a-card>
</template>

<script>
  export default {
    name: 'List',
    data(){
      return{
        options:[],
        str:''
      }
    },
    mounted() {
      this.loadOptions()
    },
    methods:{
      loadOptions(){
        this.options=[
          {
            text:'Jack',
            value:'Jack'
          },
          {
            text:'Linda',
            value:'Linda'
          },
          {
            text:'Lucy',
            value:'Lucy'
          }
        ]
      },
      handleChange(value) {
        console.log(`selected ${value}`);
      },
    }
  }
</script>
<style scoped>
</style>

测试
在这里插入图片描述

Upload 上传

官网介绍
change事件，文件上传中、完成、失败都会调用

table表格

table表格

表格分页参数

表格分页参数

<template>
  <a-card :bordered="false">
    <!--:scroll:宽度和高度超过x,y的长度，表格进行滚动-->
    <a-table border ref="testTable" rowKey="id" :columns="columns" :data-source="dataSource" :pagination="page"
             size="middle" :scroll="{ x: 1500, y: 300 }">
      <template slot="avatarslot" slot-scope="text, record, index">
        <div class="anty-img-wrap">
          <a-avatar shape="square" :src="getAvatarView(record.avatar)" icon="user"/>
        </div>
      </template>
    </a-table>
  </a-card>
</template>

<script>
  import { getUserList,getFileAccessHttpUrl } from '@/api/manage'
  import { filterObj } from '@/utils/util'

  export default {
    name: 'List',
    data() {
      return {
        dataSource:[],//表格数据
        /* 排序参数 */
        isorter: {
          column: 'createTime',
          order: 'desc'
        },
        description: '这是测试表格',
        queryParam: {},//查询参数
        page: {
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '20', '30', '50'],//每页分页参数选项
          showTotal: (total, range) => {
            return range[0] + '-' + range[1] + ' 共' + total + '条'
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        },//表格分页
        columns: [// 自定义列
          {
            title: '#',
            dataIndex: '',
            key: 'rowIndex',
            width: 60,
            align: 'center',
            fixed:'left',// 固定列
            customRender: function(t, r, index) {
              return parseInt(index) + 1
            }
          },
          {
            title: '用户账号',
            align: 'center',
            dataIndex: 'username',
            width: 120,
            sorter: true
          },

          {
            title: '头像',
            align: 'center',
            width: 120,
            dataIndex: 'avatar',
            scopedSlots: { customRender: 'avatarslot' }
          },

          {
            title: '性别',
            align: 'center',
            width: 80,
            dataIndex: 'sex_dictText',// sex_dictText字典表中的code
            sorter: true
          },
          {
            title: '生日',
            align: 'center',
            width: 100,
            dataIndex: 'birthday'
          },
          {
            title: '手机号码',
            align: 'center',
            width: 100,
            dataIndex: 'phone'
          },
          {
            title: '部门',
            align: 'center',
            width: 180,
            dataIndex: 'orgCodeTxt'
          },
          {
            title: '负责部门',
            align: 'center',
            width: 180,
            dataIndex: 'departIds_dictText'
          },
          {
            title: '状态',
            align: 'center',
            width: 80,
            dataIndex: 'status_dictText'
          },
          {
            title: '操作',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' },
            align: 'center',
            width: 170
          }

        ]
      }
    },
    mounted() {
      this.loadData(1)
    },
    methods: {
      getAvatarView: function (avatar) {
        return getFileAccessHttpUrl(avatar)
      },
      getQueryField() {
        var str = 'id,'
        this.columns.forEach(function(value) {
          str += ',' + value.dataIndex
        })
        return str
      },
      //获取查询参数
      getQueryParams() {
        let param = Object.assign({}, this.queryParam, this.isorter)
        param.field = this.getQueryField()
        param.current = this.page.current
        param.pageSize = this.page.pageSize
        return filterObj(param)
      },
      //加载表格数据
      loadData(arg) {
        if (arg == 1) {
          this.page.current = 1
        }
        let parmas = this.getQueryParams()//查询参数
        getUserList(parmas).then((res) => {
          console.log('返回参数')
          console.log(res)
          if (res.status==200) {
            const {result}=res
            this.dataSource = result.data
            this.page.total = result.totalCount
          }
        })
      }
    }
  }
</script>

<style scoped>

</style>

页面样式
在这里插入图片描述

Modal

Modal官网介绍

  1. width-宽度
  2. visible-对话框是否可见
  3. confirmLoading-确定按钮 loading
  4. okButtonProps:ok 按钮props
  5. 事件cancel/ok
  6. wrapClassName-对话框外层容器的类名
  7. cancelText-取消按钮文字

Form表单

官网介绍

  • labelCol WrapperCol栅格布局
  • this.$form.createForm(this,options)（form对象的创建）
  • this.form.resetFields()重置表单的值
  • loadsh.pick
    loadsh.pick官网介绍
    简单使用
// 复制对象属性从this.model中，复制username，password等属性的值
let fieldValue=pick(this.model,'username','password')
  • this.form.setFieldsValue(filedsVa)设置表单的属性值
    注意特殊的情况，如checkbox,多选下拉框，a-date-picker,Switch等等
  • this.form.validateFields((err,values)={})表单校验

集成echarts

jeecg前端图表使用的是Viser-vue

jeecg前端集成echarts步骤

  1. 安装依赖npm install echarts -S
  2. 在main.js中全局引入
import echarts from 'echarts'
Vue.prototype.$echarts=echarts
  1. 编写代码，在mounted函数中调用echart的实例
<template>
  <a-card :bordered="false">
    <div id="myChart" :style="{width:'600px',height:'300px'}"></div>
  </a-card>
</template>

<script>
  export default {
    name: 'List',
    data() {
      return {}
    },
    mounted() {
      this.drawLine()
    },
    methods: {
      drawLine() {
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        myChart.setOption({
          title: { text: 'xxx商品销量统计' },
          tooltip: {},
          xAxis: {
            data: ['水果', '酸奶']
          },
          yAxis: {},
          series: [{
            name: '销量',
            type: 'bar',
            data: [105, 50]
          }]
        })
      }
    }
  }
</script>

<style scoped>

</style>

数据字典组件

DictSelectTag基本使用(自定义组件)

<!-- 从字典表获取数据,dictCode格式说明: 字典code-->
<j-dict-select-tag v-model="queryParam.sex" placeholder="请输入用户性别" dictCode="sex"/>

table列用数据字典转换显示数据

JDictSelectUtil.js 列表字典函数用法

  • 第一步: 引入依赖方法
       import {initDictOptions, filterDictText} from '@/components/dict/JDictSelectUtil'
  • 第二步: 在created()初始化方法执行字典配置方法
      //初始化字典配置
      this.initDictConfig();
  • 第三步: 实现initDictConfig方法，加载列表所需要的字典(列表上有多个字典项，就执行多次initDictOptions方法)
      initDictConfig() {
        //初始化字典 - 性别
        initDictOptions('sex').then((res) => {
          if (res.success) {
            this.sexDictOptions = res.result;
          }
        });
      },
  • 第四步：实现字段的customRender方法
customRender: (text, record, index) => {
      //字典值替换通用方法
      return filterDictText(this.sexDictOptions, text);
      }

columns: [
          /*{
            title: '#',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },*/
          {
            title: '用户账号',
            align: "center",
            dataIndex: 'username',
            width: 120,
            sorter: true
          },
          {
            title: '用户姓名',
            align: "center",
            width: 100,
            dataIndex: 'realname',
          },
          {
            title: '头像',
            align: "center",
            width: 120,
            dataIndex: 'avatar',
            scopedSlots: {customRender: "avatarslot"}
          },

          {
            title: '性别',
            align: "center",
            width: 80,
            dataIndex: 'sex',
            sorter: true,
            customRender: (text, record, index) => {
      //字典值替换通用方法
      return filterDictText(this.sexDictOptions, text);
      }
          },
          {
            title: '生日',
            align: "center",
            width: 100,
            dataIndex: 'birthday'
          },
          {
            title: '手机号码',
            align: "center",
            width: 100,
            dataIndex: 'phone'
          },
          {
            title: '部门',
            align: "center",
            width: 180,
            dataIndex: 'orgCodeTxt'
          },
          {
            title: '负责部门',
            align: "center",
            width: 180,
            dataIndex: 'departIds_dictText'
          },
          {
            title: '状态',
            align: "center",
            width: 80,
            dataIndex: 'status_dictText'
          },
          {
            title: '操作',
            dataIndex: 'action',
            scopedSlots: {customRender: 'action'},
            align: "center",
            width: 170
          }

        ],
迷失的小鹿
关注
  • 1
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
推荐开源项目：Ant Design Vue Jeecg - 高效能企业级开发框架
gitblog_00044的博客
03-29 507
推荐开源项目：Ant Design Vue Jeecg - 高效能企业级开发框架 项目地址:https://gitcode.com/jeecgboot/ant-design-vue-jeecg Ant Design Vue Jeecg 是一个基于 Ant Design Vue 和 Vue.js 的企业级前端开发框架，它集成了代码生成器、前后端分离模板和丰富的组件库，旨在提升开发效率，减少重复工作，...
ant-design-vue-jeecg.rar
11-16
后台
JeecgBoot-Vue3：基于Vue3的低代码开发平台的新篇章
最新发布
chenchuang0128的博客
06-01 620
JeecgBoot-Vue3采用 Vue3.0、Vite、 Ant-Design-Vue4、TypeScript 等新技术方案，包括二次封装组件、utils、hooks、动态菜单、权限校验、按钮级别权限控制等功能。是采用Vben实现的 JeecgBoot低代码平台的全新vue3版本。强大的代码生成器让前后端代码一键生成!JeecgBoot引领低代码开发模式(OnlineCoding-> 代码生成-> 手工MERGE)， 帮助解决Java项目70%的重复工作，让开发更多关注业务。
ant-design-vue-jeecg:医院--前端
04-14
Ant Design Jeecg Vue 当前最新版本： 2.2.1（发布日期：20200713） Overview 基于 实现的 Ant Design Pro Vue 版 Jeecg-boot 的前段UI框架，采用前后端分离方案，提供强大代码生成器的快速开发平台。 前端页面代码和后端功能代码一键生成，不需要写任何代码，保持jeecg一贯的强大！！ 前端技术 基础框架： - Ant Design Of Vue 实现 JavaScript框架：Vue Webpack node yarn eslint @vue/cli 3.2.1 - 头像裁剪组件 - Alipay AntV 数据可视化图表 - antv/g2 封装实现 项目下载和运行 拉取项目代码 git clone https://github.com/zhangdaiscott/jeecg-boot.git cd jeec
【伸手党福利】【第四弹】jeecg-boot前端之ant design vue开发总结【不断更新中】
wwppp987的博客
05-26 1830
ant design vue的官方开发文档属于一个给一定前端编程基础的人看的。 对于一个直接上手jeecgboot的人来说，这个前端文档仍旧不够小白。 所以在学习过程中，在此进行一下笔记。 给大家带来伸手党的快感 首先，介绍官方文档：https://www.antdv.com 里面好多功能都在其中，只是没有一定前端开发基础，看起来会很费力。 作为小白，新建页面请移步 <a-table>表格 基础格式： <template> <a-card> <a-ta
ant-design-vue-jeecg关于首页加载过慢的优化小结
热门推荐
就是不掉头发
12-15 24万+
网站首页登陆的时候，等待较长，用户反馈体验较差，我们可以从以下几个思路优化处理以下。 1.为什么等待较长？ 很明显，有个文件加载过慢了。chunk-vendors是什么文件呢？第三方模块文件，就是node_models里面的文件，ant-design-vue-jeecg把vue主配置文件（main.js）里依赖加载需要的文件全部打包到了这个文件里，文件过大，就会加载会过慢。 2.解决问题的第一步。 去掉不必要的依赖加载。 Jeecg官网说明了加载所需要的必要文件，个人建议除建议外，其余进行相应移除和懒加
Jeecg-Boot 前端框架ant-design-vue-jeecg 页面操作完关闭tab
风雨断肠人——博客
02-01 7299
最近在使用Jeecg-Boot框架，在使用前端ant-design-vue-jeecg，由于编辑页面比较复杂，弹框用起来不是很顺手，便将整个编辑页面放到一个Tab中，如图： 但是在点击保存完成时想关闭本Tab比较困难，经过对代码结构研究，写了一个解决方案。 tab是在TabLayout下对RouteView中，在TabLayout组建中定义方法closeTab(key)；在closeTab...
word源码java-ant-design-vue-jeecg:jeecgboot-前端
06-05
Design&Vue，Mybatis-plus，Shiro，JWT，支持微服务。强大的代码生成器让前后端代码一键生成，实现低代码开发! JeecgBoot 引领新的低代码开发模式(OnlineCoding-> 代码生成器-> 手工MERGE)， 帮助解决Java项目70%的...
用于设置ant-design-vue中table组件的列宽可拖拽
08-05
vuex2.x中用于设置ant-design-vue中table组件的列宽可拖拽
JeecgBoot(ant-design-vue)实现筛选框：支持下拉搜索+下拉多选+表字典(支持条件查询)功能
07-30
JeecgBoot(ant-design-vue)实现筛选框：支持下拉搜索+下拉多选+表字典(支持条件查询)功能 JSearchMultiSelectTag.vue文件
vue_ant-design-vue菜单递归
12-28
在Vue.js框架中，Ant Design Vue是一个非常流行的UI组件库，它提供了丰富的界面元素和设计模式，便于开发者构建美观且功能强大的Web应用。本项目主要关注的是Ant Design Vue中的菜单（Menu）组件，特别是如何处理...
ant-design-vue.zip
12-13
使用ant-design-vue搭建的后台管理系统,可使用jeecgboot的后台,这个是最基本的框架,只有系统管理一个模块,方便后续二次开发
antdv & ant-design-vue-jeecg 顶部一级菜单，左侧导航二三级菜单。
a841489295的博客
08-29 3194
antdv & ant-design-vue-jeecg 顶部一级菜单，左侧导航二三级菜单。
Jeecg + Antd Design Vue 坑点记录
weixin_45455227的博客
11-02 1680
1.走马灯组件（a-carousel）分页后，打开页面不定位到第一页 是因为后台所传数据还没有接收完就开始渲染了，需要加一个v-if判断接收数据不为空 <div class="DigitalSignage"> <a-carousel v-if="eqpList.length !== 0"> <div class='carousel-item' v-for="(item,index) in eqpList" :key="index" >
ant-design-vue-jeecg 项目首屏加载过慢的问题
牛晓林的博客
12-16 4693
最近用ant-design-vue-jeecg的开源框架写项目，那个加载叫一个慢啊！ 我自己谷歌浏览器在网速好的情况下，还得加载十多秒甚至20秒！！！这搁那个用户身上能忍受！！！ 关键已经用了各种webpack配置，也都没见什么成效。 罪魁祸首就是他在线开发表单的包，大到无法想象！ package.json中将这个依赖项删除，然后删除node_modules, yarn重新装，再打包，效果立竿见影！ 这时候强刷浏览器，开始的加载动画时间一晃而过~~美滋滋 反正我们也不需要在线开发表单的功能，对我这个项目
Jeecg-Boot相对得Antd-Design（个人笔记）
weixin_47295135的博客
02-25 694
文章目录前言一、Antd-Designantd-DesignGeneralbutton按钮click事件 ——点击按钮时的回调 （event）=>void 回调参数LayoutGrid 栅格NavigationAffix 固钉子-（将页面元素钉在可视范围）Breadcrumb面包屑（目录结构）-Dropdown下拉菜单-Checkbox多选题-DatePicker 日期选择框Data EntryForm 表单Input 事件inputNumber数字输入框Radio 单选框Select 选择器.
《JeecgBoot系列》Ant-Design-Vue开发配置记录
https://blog.datasource.space
07-30 2788
在使用JeectBoot(ant-design-vue)设计表单时，需要实现下拉搜索+下拉多选+表字典(支持条件查询)。但是系统目前有两个组件分别是和。经测试发现：1.支持下拉多选+支持表字典(不支持条件查询)。2.支持下拉搜索+表字典(支持条件查询)。所以两者都不能满足。因为在需求中主要以下拉搜索和表字典(支持条件查询为主)，所以选择在的基础上进行调整，从而实现需求内容。
jeecg /ant-design-vuepro 前端使用
xidianzxm
02-27 1330
1、原生axios使用 <script> import Vue from 'vue'; import axios from 'axios'; axios.defaults.baseURL = 'http://127.0.0.1:3000/jeecg-boot/sys/annountCement'; // Vue.prototype.$http = axios;...
jeecg-boot 前端加载优化版 解决加载慢
魔道晓树的专栏
06-11 4880
jeecg-boot 前端加载优化版 解决加载慢
ant-design-vue-jeecg
03-16
ant-design-vue-jeecg是一款基于Ant Design Vue和JEECG快速开发平台的前端UI框架。它提供了丰富的UI组件和模板，可以帮助开发者快速构建高质量的Web应用程序。同时，它还提供了一些常用的业务组件和功能，如表格、...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值