目的:记录一下自己工作过程中遇到的 Ant Design Vue 开发问题
文章目录
- Ant Design Vue 开发问题
- async和await让异步编程更简单
- 1、antdv中table组件 scopedSlots 和 ellipsis 属性一起使用,悬浮框失效问题
- 2、antdv修改调用的后端地址
- 3、Java修改application名称和IP地址
- 4、antdv调用后端接口文件
- 5、antdv路由文件
- 6、antdv前端页面文件
- 7、s-table的columns属性值可以动态新增列并控制显示/不显示
- 8、页面搜索框和选择框对齐问题
- 9、s-table加横向滚动条
- 10、s-table使用插槽列表中的文字不对齐问题
- 11、vue 动态表单 点击增加添加输入框,删除根据下标删除
- 12、span标签字体加粗
- 13、span标签字体大小
- 14、居中对齐
- 15、前端发送PUT请求使用封装好的 Http.putUrlencoded(如果用的requestBody还是要用Http.request.put那个)
- 16、刷新页面
- 17、表单校验textarea必填项
- 18、获取路由push传递的值
- 19、声明属性
- 20、使用插槽的同时省略列表内容
- 21、边框贴着右边 <div style="float:right"> 和 style="margin-right: 0px" 一起使用
- 22、已封装好的方法,校验身份证格式港澳证件号码格式
- 23、table固定列
- 24、调用其他页面的方法,方式一(页面1要引入页面2作为组件)
- 25、调用其他页面的方法,方式二(页面2要引入页面1作为组件)
- 26、弹窗调用接口
- 27、列表实现单选功能
- 28、弹框同步调用2个方法
- 29、成对的输入框
- 30、通过设置边缘距离保持框对齐
- 31、感叹号提示信息
- 32、对话框不要有任何按钮
- 33、蓝色竖线
- 34、赋值
- 35、蓝色温馨提示
- 36、css自定义颜色
- 37、路由跳转
- 38、loadData写死数据
- 39、返回按钮后的长分割线
- 40、自定义日期选择器按钮
- 41、style样式用对象的方式赋值,可以使用自定义的变量进行动态改变值
- 42、前端查字典
- 43、使用插槽给列表的标题加感叹号
- 44、有序列表、无序列表
- 45、正则表达式校验字段
- 46、下载文件并将流转为http地址
- 47、取消保存按钮插槽
- 48、这个方法可以获取到其他页面返回按钮,返回来的路由
- 49、用插槽手动换行
- 50、分隔线
- 51、返回按钮
- 52、限制输入框只能输入整数
- 53、正整数正则表达式
- 54、监听属性变化
- 55、获取当前季度
- 56、判断是否是字符串
- 57、同步关键字
- 58、js判断2个日期相差年月
- 59、定义js方法时可以给入参加默认值,调用时可以不传递带有默认值的参数
- 60、右下角悬浮返回按钮
- 61、用<search-form-table>标签渲染列表数据使用单选按钮
- 62、<a-modal> 加上 destroy-on-close属性
Ant Design Vue 开发问题
async和await让异步编程更简单
https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Asynchronous/Async_await
1、antdv中table组件 scopedSlots 和 ellipsis 属性一起使用,悬浮框失效问题
https://blog.csdn.net/qq_42067121/article/details/118080332
加 title 即可解决
<span
slot="kskm"
slot-scope="text"
>
<span :title="kskmtest(text)">{{ kskmtest(text) }}</span>
</span>
2、antdv修改调用的后端地址
修改.env.development文件中的 VUE_APP_BASE_API_DJRD = ‘/djrd-qyd-core-hcx/api/v1’(自己的后端地址)
3、Java修改application名称和IP地址
bootstrap.yml文件中修改
应用名称:spring:
application:
name: djrd-qyd-core-hcx(自己的应用名称)
IP地址:eureka:
instance:
ip-address: 192.168.47.161(自己的IP地址,不要写localhost/127.0.0.1)
4、antdv调用后端接口文件
放在src/api/interfaces/xxx.js 并且需要在src/api/index.js文件中声明
5、antdv路由文件
放在src/router/module/xxx.js src/router/index.js文件中声明
6、antdv前端页面文件
放在src/views/xxx.vue
7、s-table的columns属性值可以动态新增列并控制显示/不显示
columns () {
const newColums = []
//判断是否新增
if (this.pjkm.indexOf('01') !== -1) {
//新增的列
newColums.push({
title: '理论成绩',
dataIndex: 'llcj',
width: 60,
scopedSlots: { customRender: 'llcj' }
})
}
return[
{
title: '序号',
scopedSlots: { customRender: 'serial' },
width: 50
},
{
title: '姓名',
ellipsis: true,
dataIndex: 'bgc023',
width: 60
},
//显示新增的列
...newColums,
{
title: '准考证号',
ellipsis: true,
dataIndex: 'zkzh',
width: 80
},
]
}
8、页面搜索框和选择框对齐问题
目前对齐方式为:左边的框左对齐(style="float:left")
中间的框居中对齐(style="text-align: center")
右边的框右对齐(style="float:right")
9、s-table加横向滚动条
:scroll="{ x: 1200 }"
10、s-table使用插槽列表中的文字不对齐问题
//使用插槽
scopedSlots: { customRender: 'kskm' }
//插槽
<span
slot="kskm"
slot-scope="text"
>
//不要使用<p>标签显示数据即可
//<p :title="kskmtest(text)">{{ kskmtest(text) }}</p>
<span :title="kskmtest(text)">{{ kskmtest(text) }}</span>
</span>
11、vue 动态表单 点击增加添加输入框,删除根据下标删除
12、span标签字体加粗
<span style="font-weight:bold">修改成绩原因</span>
13、span标签字体大小
<span style="font-size:15px">成绩</span>
14、居中对齐
<a-col :span="8" style="text-align: center">
15、前端发送PUT请求使用封装好的 Http.putUrlencoded(如果用的requestBody还是要用Http.request.put那个)
updateZdUserStatus(params) {
return Http.putUrlencoded(
baseUrl + '/updateZdUserStatus',
params
).then(({ data }) => data)
}
16、刷新页面
this.$refs['queryForm'].resetFields()
this.$refs['kwjhTable'].refresh(true)
17、表单校验textarea必填项
<a-form-model ref="kscjbjQueryForm" :rules="rules" :model="kscjbjData">
<a-row>
<a-col>
<a-form-model-item prop="changeAchievementReason" label="修改成绩原因" style="font-weight:bold">
<a-textarea
v-model="kscjbjData.changeAchievementReason"
placeholder="请输入修改成绩原因"
:auto-size="{ minRows: 4, maxRows: 8 }"
/>
</a-form-model-item>
</a-col>
</a-row>
</a-form-model>
18、获取路由push传递的值
this.$route.query.practiceId || ''
19、声明属性
props: {
busId: {
type: String,
default: ''
},
initType: {
type: String,
default: ''
}
}
20、使用插槽的同时省略列表内容
<a-popover
slot="contentPop"
slot-scope="text, record"
>
<template slot="content">
{{ getContent(record.questionName) }}
</template>
{{ getContent(record.questionName).length > 16?getContent(record.questionName).substr(0,16) + '...' : getContent(record.questionName) }}
</a-popover>
21、边框贴着右边
和 style=“margin-right: 0px” 一起使用
<div style="float:right">
<a-form-model-item
label="练习时间"
prop="name"
:colon="false"
style="margin-right: 0px"
>
<a-range-picker
v-model="yxrq"
style="width: 200px;"
type="date"
:format="dateFormat"
:value-format="dateFormat"
@change="(date, dateString) => { handleDateChange('yxrq', date, dateString) }"
/>
</a-form-model-item>
</div>
22、已封装好的方法,校验身份证格式港澳证件号码格式
idCardCheck
23、table固定列
fixed: 'left',
ellipsis: true, //省略
fixed: 'right',
ellipsis: true, //省略
24、调用其他页面的方法,方式一(页面1要引入页面2作为组件)
//被调用的是异步方法
handleOk () {
const self = this
self.confirmLoading = true
self.$refs['stkEditModal'].handleSave().then(() => { //这句代码调用了其他页面2的handleSave方法,handleSave是异步方法才需要.then和.catch
self.showModal = false
self.handleSearch()
}).catch(err => {
self.$message.error(err.errmsg)
}).finally(() => {
self.confirmLoading = false
})
},
//被调用的是普通方法
const self = this
const reslut = self.$refs['ybmWaitingQueue'].toggleCollapsed()
console.log('reslut', reslut)
25、调用其他页面的方法,方式二(页面2要引入页面1作为组件)
页面1(子组件):
lxtksjk-type-tree.vue有一个方法
deleteTreeNode (treeData) {
console.log('删除分类', treeData, this.dataType)
api.lxtk.deleteTreeNode({
id: treeData.key,
type: this.dataType
}).then(res => {
console.log('删除树分类', res)
this.$message.success('删除成功')
this.$emit('handleDelete') //这句代码调用了页面2的handleDelete方法
this.queryTreeNode()
}).catch(err => {
console.error(err)
this.$message.error(err.errmsg)
})
},
页面2(父组件):
lxtk-list.vue引用了页面1作为组件
<a-col :span="5">
<StklbTree
style="height: 100%;"
data-type="question-library"
@handleSelect="handleSelectTree"
@handleDelete="handleDeleteTreeNode" //这句代码表示被引用的子组件可以调用父组件的handleDeleteTreeNode方法
/>
</a-col>
26、弹窗调用接口
const self = this
this.$confirm({
title: '是否确认将所选记录审核通过,并提交至区审核环节?',
okText: '确认',
cancelText: '取消',
onOk: () => {
const id = [self.cdb341]
api.ljyjt_qsh.ljyjt_qsh_qshtg({
cdb293: self.form.cdb293,
shsm: self.cdb304,
lshList: id
}).then((res) => {
self.$message.success('提交成功')
self.cdb304 = ''
self.getData()
})
.catch((err) => {
self.$message.error(err)
}).finally(() => {
self.searchLoading = false
})
}
})
27、列表实现单选功能
//第一步
<sinogear-table
:columns="columns"
:row-selection="ljyRowSelection" //自定义单选功能
:data-source="data"
:dicts="dicts"
:scroll="{x:true}"
:loading="searchLoading"
:pagination="defaultPage"
bordered
@change="handlePaginationChange"
>
<span
slot="num"
slot-scope="item"
>{{ item.num+1 }}</span>
<span
slot="cce62p"
slot-scope="item"
>
<span
v-if="item==='1'"
style="display:inline-block; width:20px;height:20px;background:red;border-radius:20px"
>
<span style="visibility:hidden">1</span>
</span>
</span>
</sinogear-table>
//第二步
return {
selectedLjyRowKeys: [],
selectedLjyRow: [],
}
//第三步
computed: {
ljyRowSelection() {
return {
type: 'radio',
selectedRowKeys: this.selectedLjyRowKeys,
onChange: (selectedRowKeys, selectedRow) => {
console.log(selectedRowKeys, selectedRow[0].cdb341)
this.selectedLjyRowKeys = selectedRowKeys
this.selectedLjyRow = selectedRow
this.cdb341 = selectedRow[0].cdb341
}
}
}
},
28、弹框同步调用2个方法
async submitHandle() {
const self = this
const userInfo = auth.getUserInfo()
if (userInfo.orgCode.length !== 6 && userInfo.orgCode.length !== 8) {
self.$message.error('非街/区级用户没有权限')
return
}
await self.$refs.formRef.validate((valid) => {
if (valid) {
self.$confirm({
content: '是否将当前数据保存并上报?',
okText: '确定',
cancelText: '取消',
onOk() {
self.$refs.formRef.validate(async(valid) => {
if (valid) {
self.form.ccb489 = self.userInFo.id
self.form.ccb491 = self.userInFo.orgCodeOld
self.form.ccb490 = moment().format('YYYY-MM-DD')
try {
const result = await api.ljyjt_xxtb.ljyjt_xxtb_bctbxx({ ...self.form })
if (result) {
api.ljyjt_xxtb.ljyjt_xxtb_tjtbxx({
lshList: self.$route.query.cdb341
}).then((res) => {
self.$message.success('提交成功')
self.$router.back()
}).catch((err) => {
self.$message.error(err)
}).finally(() => {
self.searchLoading = false
})
}
} catch (error) {
self.$message.error(error)
}
}
})
},
onCancel() {}
})
}
})
},
29、成对的输入框
参考ant design vue组件Descriptions 列表描述
30、通过设置边缘距离保持框对齐
style="margin-right: 0px"
style="margin-left:28px"
style="margin-top:5px"
style="margin-bottom:10px"
31、感叹号提示信息
<template>
<a-popover>
<template slot="content">
<span>导出考生名单:仅导出已勾选,并且安排状态为"已安排"的考生</span>
</template>
<a-icon type="exclamation-circle" />
</a-popover>
</template>
32、对话框不要有任何按钮
<a-modal
v-model="showExamineeModal"
title="考生信息"
width="850px"
centered
style="top:20px"
destroy-on-close
:footer="null" //对话框不要有任何按钮
@cancel="handleCancel"
>
<ExamineeModal
ref="ExamineeModal"
/>
</a-modal>
33、蓝色竖线
<div class="card-title title-bottom"> //长下划线
<div class="card-label">
<div class="block-sec" />
<span class="card-title-text">
查询条件
</span>
</div>
</div>
34、赋值
this.$set(this.formData, 'bgb221', val)
35、蓝色温馨提示
<div class="box-tips">
<a-icon
style="margin-left:10px;font-size:15px"
type="exclamation-circle"
theme="filled"
/>
温馨提示:选择职业工种变更的考点后,需前往“考点申报”界面,上传“考点申请表”。
</div>
36、css自定义颜色
.colorOne{
color: rgba(245, 154, 35);
}
37、路由跳转
this.$router.push({
path: 'baxq',
query: {
initType: 'edit'
}
})
38、loadData写死数据
return new Promise((resolve, reject) => {
resolve({
pageNo: 1,
totalCount: 1,
data: [{zymc: '保育员', gzmc: '无', dj: '一级、二级、三级、四级', bmsj: '2022-11-10-2022-11-15', ybmzt: '启用'}]
})
})
39、返回按钮后的长分割线
<div class="card-title title-bottom" style="border-bottom: 1px solid #e8e8e8;">
...
</div>
40、自定义日期选择器按钮
<a-col :span="8">
<a-form-model-item
label="报名日期"
prop="tjrq"
:colon="false"
style="margin-right: 0px"
>
<a-range-picker
v-model="formData.bmsj"
style="width: 200px"
:ranges="{ '今天': [moment(moment().format('YYYY-MM-DD')), moment(moment().format('YYYY-MM-DD')+' 23:59:59')],
'近7天': [moment(moment().format('YYYY-MM-DD')).add(-6,'day'), moment(moment().format('YYYY-MM-DD')+' 23:59:59')],
'当月': [moment().startOf('month'), moment(moment().format('YYYY-MM-DD')+' 23:59:59')] }"
:show-time="{defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')]}" //设置用户选择日期时默认的时分秒
format="YYYY/MM/DD HH:mm:ss"
@change="onChangeDate"
/>
</a-form-model-item>
</a-col>
onChangeDate(dates, dateStrings) {
console.log('From: ', dates[0], ', to: ', dates[1])
console.log('From: ', dateStrings[0], ', to: ', dateStrings[1])
},
41、style样式用对象的方式赋值,可以使用自定义的变量进行动态改变值
//rightWidth是自己定义的变量,可以根据情况改变赋值
//display: 'inline-block' 可以让多个div在同一行显示(前提是多个div的width相加占比不超过100%),不分行
<div :style="{display: 'inline-block',width:rightWidth}">
42、前端查字典
mounted() {
this.$svDict
.getDicts({
perPage: ['BGE116'],
perDay: [],
perWeek: []
})
.then((res) => {
this.dicts = res.perPage
})
},
43、使用插槽给列表的标题加感叹号
{
// title: '推荐总人数', //不要标题
dataIndex: 'recNumber',
slots: { title: 'recNumber' }, //使用插槽
width: 80
},
//定义插槽
<span slot="recNumber">
推荐总人次
<template>
<a-popover>
<template slot="content">
<span>提交预报名申请的人次(一个考生可能重复报名多次)</span>
</template>
<a-icon type="exclamation-circle" />
</a-popover>
</template>
</span>
44、有序列表、无序列表
<ul> <ol> <li>
45、正则表达式校验字段
rules: {
bgc026: [
{
required: true,
message: '请填写手机号码',
trigger: 'blur'
},
{
pattern: /^[1][3-9][0-9]{9}$/,
message: '请确认您的手机号码填写是否有误',
trigger: 'blur'
}
]
}
46、下载文件并将流转为http地址
handleDownland () {
api.kwjhKsxx.download({
id: this.fileid
}).then(res => {
console.log('------下载附件-------', res)
this.formData.url = res.url
const fileNameStr = res.fileType.split('.')
const fileType = fileNameStr[fileNameStr.length - 1]
this.formData.fileType = fileType
}).catch(err => {
console.error(err)
this.$message.error(err.errmsg)
})
}
async download (params) {
const res = await Http.download(baseUrlFile + `/storage/download`, params)
const blob = new Blob([res.data], { type: ['image/jpeg', 'application/pdf'] }) // 图片类型 'image/jpeg' pdf类型:application/pdf
const href = window.URL.createObjectURL(blob)
const resData = {
'url': href, //返回一个http地址
'fileType': res.headers['content-disposition'] //从这里获取文件名
}
return resData
// window.open(href) //这里是直接打开一个窗口去预览
}
47、取消保存按钮插槽
<template slot="footer">
<a-button @click="handleCancel()">
取消
</a-button>
<a-button
type="primary"
@click="save()"
>保存
</a-button>
</template>
48、这个方法可以获取到其他页面返回按钮,返回来的路由
beforeRouteEnter (to, from, next) {
console.log('返回来的路由', from)
next(vm => {
if (from.name === 'ksxx-grbk-all-detail' || from.name === 'addStudent' || from.name === 'ksxx-detail') {
vm.paneKey = 'tjfs'
}
})
},
49、用插槽手动换行
<a-col :span="8">
<a-form-model-item class="stress-field" :colon="false">
<div slot="label" class="stress line-feed">工作人员身份证<br />号码</div>
<a-input v-model="formData.ksny" allowClear/>
</a-form-model-item>
</a-col>
.stress-field ::v-deep .ant-form-item-label {
label {
display: flex;
justify-content: flex-end;
align-items: center;
.line-feed {
line-height: 1.5;
}
}
}
50、分隔线
<a-divider type="vertical" />
51、返回按钮
handleBack() {
this.$router.go(-1)
},
52、限制输入框只能输入整数
<a-input
v-if="record.editable"
oninput="value=value.replace(/[^\d]/g,'')" //正则表达式
style="margin: -5px 0"
:value="text"
@change="e => handleChange(e.target.value, record.key, col)"
/>
53、正整数正则表达式
var numReg = /^\+?[1-9][0-9]*$/;
var numRe = new RegExp(numReg);
if (!numRe.test(target.BFB)) {
this.$message.error("百分比只能输入数字");
return;
}
54、监听属性变化
watch: {
bdz26d() { //监听bdz26d
this.getList(); //bdz26d变化就调用方法
}
},
55、获取当前季度
boe484End: {
"01": moment().format("YYYY") + "01",
"02": moment().format("YYYY") + "01",
"03": moment().format("YYYY") + "01",
"04": moment().format("YYYY") + "02",
"05": moment().format("YYYY") + "02",
"06": moment().format("YYYY") + "02",
"07": moment().format("YYYY") + "03",
"08": moment().format("YYYY") + "03",
"09": moment().format("YYYY") + "03",
"10": moment().format("YYYY") + "04",
"11": moment().format("YYYY") + "04",
"12": moment().format("YYYY") + "04"
}[moment().format("MM")]
56、判断是否是字符串
typeof (this.formData.bhc003) === "string" ? '是' : '否'
57、同步关键字
async await
58、js判断2个日期相差年月
const diff = moment(this.formData.bde325End).diff(moment(this.formData.bde325Begin), "months");
console.log("年月相差", diff);
59、定义js方法时可以给入参加默认值,调用时可以不传递带有默认值的参数
queryDetailFormOther(busId, bze204 = "") {} //定义带有默认值的方法,bze204默认为空串
queryDetailFormOther(busId); //调用时可以不传递带有默认值的参数
60、右下角悬浮返回按钮
<back-off @click="handleBack" bottom="200px"/>
61、用标签渲染列表数据使用单选按钮
single(单选)、multiple(多选)
62、 加上 destroy-on-close属性
可以在关闭时销毁整个对话框,能解决一些问题
比如:点击审核按钮时,点击确定按钮,输入框的必录校验弹出信息“审核信息不能为空”,然后点击取消/关闭按钮,
然后再点击审核按钮,还未点击确定按钮,校验信息就直接出现了,加上destroy-on-close就可以解决这个问题