![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
ant-design-vue
文章平均质量分 55
qq_36437172
这个作者很懒,什么都没留下…
展开
-
ant-design-vue 库 Loading 组件封装
ant-design-vue 库中 Spin :用于页面和区块的加载中状态。页面局部处于等待异步数据或正在渲染过程时,合适的加载动效会有效缓解用户的焦虑。原创 2022-09-20 18:07:13 · 3799 阅读 · 0 评论 -
Ant Design Vue 展开行
只展开当前行table 中重要的属性如下:参数说明rowKey表格行 key 的取值,可以是字符串或一个函数expandedRowKeys展开的行,控制属性。expandedRowRender额外的展开行实现案例如下:const columns = function (h) { return [ { title: "姓名", dataIndex: "name", key: "name", width: 100 }, { title: "年转载 2021-11-09 20:31:50 · 1149 阅读 · 0 评论 -
tableSearch 组件
table-search原创 2021-08-29 11:32:12 · 1259 阅读 · 0 评论 -
antd-vue table 动态添加必填项
import Schema from 'async-validator'async handleValidate () { const length = this.tableData.length for (let index = 0; index < length; index++) { for await (let form of (this.tableData[index].extraInfo || [])) { if (form.required) {原创 2021-08-25 11:13:21 · 3491 阅读 · 0 评论 -
antd-vue table 分页缓存已勾选数据
{ {原创 2021-08-25 11:13:50 · 2753 阅读 · 0 评论 -
ant-design-vue select 组件 placeholder 被隐藏不显示问题
问题描述:select 组件绑定了 v-model 和 placeholder,当 v-modal 绑定的属性为空时,select 组件的 placeholder 属性不显示。// 初始化 level = '' <a-select v-model="level" placeholder="选择日志级别" allow-clear> <a-select-option value="info">一般</a-select-option> <a-sele..转载 2021-05-09 10:32:25 · 3613 阅读 · 0 评论 -
使用 async-validator 自定义校验规则实现 table 组件的循环表单校验功能
const validators = []async validate () { try { await Promise.all([...validators.map(vm => vm.validate())]) return true } catch (err) { return false }}import Reg from '@/utils/utils-libs/validator.js...原创 2021-02-09 17:11:06 · 3426 阅读 · 0 评论 -
ant-design-vue 表单验证和 validator 自定义表单验证
在ant-design-vue中,提供FormModel表单组件,且支持v-model数据绑定,同时可以校验和提交功能的表单。一、表单验证<a-form-model ref="form" :rules="rules" :model="form" layout="inline" :label-col="{span: 10}" :wrapper-col="{span: 14}"> <a-form-model-item label="密...原创 2021-02-09 11:56:41 · 28789 阅读 · 2 评论 -
ant-design-vue table 多选支持默认全选功能
<a-table size="small" bordered rowKey="id" row-selection={{ onChange: this.handleSelectChange.bind(this), getCheckboxProps: record => { return { props: { defaultChecked: this.selectedRowKeys.includes(record.id...原创 2021-02-09 11:34:38 · 5464 阅读 · 0 评论 -
ant-design-vue 点击操作确认弹框封装
点击一系列按钮,我们需要弹出二级弹框。当我们确认后,在进行调用接口。1.为了精简代码,可能我们会将弹框封装成一个工具函数。在$antdConfirm中,我们点击确认和取消按钮分别返回true/false。export const operationConfirm = function (attr, message) { const that = this return new Promise((resolve, reject) => { that.$antdConfir...原创 2020-12-09 22:48:11 · 5848 阅读 · 0 评论 -
ant-design-vue 数据字典 select 组件封装
对于前后端协商形成的key-value数据字典功能,可以通过平台维护该数据字典功能,也有可以通过前端自行添加枚举值统一配置。一、前端维护枚举值首先,我们在配置文件中,配置枚举值信息。// src/components/Dictionary/config/index.jsexport const riskGrade = [ { name: '好', value: 3 }, { name: '一般', value: 2 }, { name: '差', value: 1 },]..原创 2020-12-07 22:29:33 · 3089 阅读 · 0 评论 -
vue 后台管理系统如何生成动态菜单
说起菜单的如何生成的,这个会与路由和权限的定义有关。因为路由涉及页面的跳转以及当前菜单项高亮选中等,可能后面还会涉及面包屑、标签页等功能的制作。目前不考虑权限,我们根据约定路由的配置,来生成动态菜单。一、布局对于后台管理系统,通常由 sider 菜单栏、header、footer 和 content 的内容组成。<a-layout> <a-layout-sider>Sider</a-layout-sider> <a-layout> .原创 2020-11-08 22:09:15 · 2845 阅读 · 3 评论 -
ant-design-vue select 可搜索下拉加载更多
1.搜索配置showSearch属性,支持单选模式可搜索。filterOption是否根据输入项进行筛选。当其为一个函数时,会接收inputValueoption两个参数,当option符合筛选条件时,应返回true,反之则返回false。filterOption(input, option) { return option.componentOptions.children[0].text.includes(input)},2.搜索与远程数据结合这里需要...原创 2020-11-05 22:09:32 · 6856 阅读 · 5 评论 -
ant-design-vue cascader 级联选择动态加载省市区接口数据
通过接口获取数据,用于配置 cascader 组件的options 可选数据源。async mounted () { const data = await this.getRegion() this.options = data.map(item => { item.isLeaf = false return item })}在接口返回的数据中,添加参数 isLeaf: false,动态加载数据时,才会触发 loadData 方法,.原创 2020-11-05 22:08:21 · 5709 阅读 · 7 评论 -
ant-desigin-vue 中 form 表单的使用
1.表单提交<a-form @submit.prevent="handleSubmit" :autoFormCreate="(form) => this.form = form"> <a-form-item fieldDecoratorId="brand" :fieldDecoratorOptions="{rules: [{ required: t...转载 2020-05-19 16:39:55 · 871 阅读 · 0 评论 -
ant design vue 中的 Table 组件如何合并行
根据Ant Design Vue - Table 表格,表格行/列合并。表格支持行/列合并,使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时,设置的表格不会渲染。属性customRender:生成复杂数据的渲染函数,参数分别为当前行的值,当前行数据,行索引,@return 里面可以设置表格行/列合并,可参考 demo 表格行/列合并。const temp = {}; // 当前重复的值,支持多列const mergeCellKey = (text,..转载 2020-05-19 10:21:27 · 7353 阅读 · 4 评论 -
基于ant-design-vue table 组件的使用
需求分析:这里主要介绍表格的字段渲染(筛选和排序),分页设置,选择功能设置等功能。1.表格渲染(筛选和排序)<a-table ref="TableInfo" :columns="columns" :dataSource="dataSource" :pagination="pagination" :loading="loading" :rowSelection="...原创 2019-08-28 23:45:12 · 7323 阅读 · 0 评论