ant design vue
粉末的沉淀
无趣
展开
-
ant design vue:列值相同的行合并
比如一个5行的表格,1、2、3行值相同,4、5行相同,那么上面的数组就是[3,0,0,2,0],就是说第1行占3行,第2、3行不占行,这样就相当于把3行合并成1行了,以此类推。上面的方法可以生成一个数组,这个数组保存了需要合并的每一行的rowSpan,然后根据index设置每个的rowSpan就可以了。原博客用的是props,但是antd的官网用的是attrs,我试了一下,用props确实没有效果。列值相同的行合并,这种需求很常见,找了很多合并行的例子,才解决了我的问题。原创 2023-02-24 08:56:33 · 1979 阅读 · 2 评论 -
ant design vue:带日期标记的日历
在template里直接用moment,先import然后还需要在data里再定义一下moment。,如果是做项目的话,直接在App.vue文件里设置,整个项目的antd组件就都被汉化了。,我的日历头部右边只需要显示月,不需要年,把年的部分去掉即可。日历默认是英文的,需要汉化,原创 2023-02-21 10:01:00 · 1647 阅读 · 0 评论 -
vue:自定义组件如何使用v-model
在vue中,v-model 的值相当于默认传递了一个名为 value 的 prop 和一个名为 input 的事件(例如:我们使用antd vue的auto complete来自定义一个组件。这个自定义组件我要放在jeecgboot框架里,作为一个通用的自定义组件。注意,这个value的prop是需要在自定义组件内声明的。时,我们有时候需要使用 v-model 来双向绑定。只需要传入 dataSource 联想的数据源即可。在index.js文件里引入。原创 2023-02-09 10:04:29 · 708 阅读 · 0 评论 -
ant design vue:select选项太长显示不全
加:dropdownMatchSelectWidth='false'即可,但是不同浏览器显示有差异,比如谷歌上显示正常,但是火狐上虽然变宽了一点,但依旧有若干选项显示省略号。auto-complete其实跟select类似,我这个案例是用auto-complete做的。原创 2023-02-06 17:46:59 · 1791 阅读 · 0 评论 -
ant design vue:自定义省市分离选择器
jeecgboot自带省市区组件,但是我们的需求是输入户籍,一般来说户籍只需要输入省和市即可,所以jeecgboot自带的省市区组件不适用。实现思路:放两个select,第一个是省,第二个是市,市的option要由选择的省来确定,两者由联动关系。实现步骤:1、数据库分三个字段,province(省),city(市)和register(户籍),省和市存code,户籍存文本,根据省市code对应的文本进行拼接即可得到户。在表单页只显示province和city字段,客户下拉输入,在查询页只显示r原创 2022-04-27 15:30:11 · 2265 阅读 · 0 评论 -
jeecgboot:主表(antd table)默认选中第一条记录
问题描述:使用jeecgboot框架生成ERP主题的主附表样式,主表默认不选中任何记录,每次需要手动点击一条,下边的附表才能显示对应的查询记录,我们现在要做的是让主表默认选中第一条。解决思路:刚开始我的思路是找到radio的dom元素,然后将它的checked属性设置为true,但是折腾了一晚上,无论是用nexttick还是settimeout,无论我放在哪个生命周期里,统统都只能打印元素,却无法操作元素。vue操作dom元素的3种方法示例vue里最方便的是给组件加ref,然后再操作原创 2022-04-27 11:19:00 · 1853 阅读 · 0 评论 -
ant-design-vue:利用sortablejs实现tab 标签页的拖拽
使用yarn add sortablejs安装sortablejs插件,也在main.js里正确引入并且和vue绑定了,但是一直报这个错。实在不想解决这个报错了,于是直接下载了Sortable.min.js,从index.html引入。<template> <div> <a-card style="width: 1000px;"> <!-- 测试 ant tag 组件的拖拽 --> <a-tabs type="ca..原创 2022-04-23 21:35:50 · 2238 阅读 · 0 评论 -
ant design vue:tooltip组件color设置失效的解决方案
可能因为我的ant design vue版本太低不支持color属性,按照官网设置color无效,各种百度终于找到了合适自己的方法:1、修改浮层默认的渲染父节点,默认是body2、修改提示框和小三角的样式(背景色),记得一定要加/deep/.<template> <div style="width: 200px; margin:100px auto;"> <a-tooltip title="导出excel" :getPopupContai.原创 2022-04-12 15:52:46 · 2737 阅读 · 1 评论 -
ant design vue:tree select根据层级设置不可选
官网的案例,直接从数据生产tree,这种方法固然简单,但是我这个需求要根据tree的层级来设置是否可选,所以需要进一步设置每一个层次的node。<a-tree-select v-model="value" style="width: 100%" :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" :tree-data="treeData" placeholder="Please select原创 2022-04-03 13:47:23 · 5181 阅读 · 0 评论 -
ant design vue:a-select使用v-model后无法选择的解决方法
<a-select :options="options" v-model="model.pid" @change="handleChange"></a-select>刚开始我用了v-model="model.pid",下拉列表确实可以获取到model.pid作为当前值,下拉选项也可以显示出来,但是点击其他选项根本无反应...原创 2022-03-15 14:50:48 · 7696 阅读 · 6 评论 -
ant design vue:添加字段交互校验规则
a-form-model自带的:rules="validatorRules"可以给form里每个字段设置校验规则,比如必填,必须为数字等等,但是如果添加字段交互校验规则,比如A字段必须大于B字段,就需要使用函数来校验了。1、函数校验规则要定义在data下边,return的上边。2、然后把刚才定义的校验规则加到validatorRules里面去。 // 加在lsl上的校验规则,value是指lsl的值 let handleValidatorLsl = (rule, value, c原创 2022-03-04 12:03:27 · 1260 阅读 · 0 评论 -
ant-design:a-cascader自适应宽度
1、给a-cascader设置一个动态的style<a-cascader ref="cascader" :options="queryCondition" :show-search="{ filter }" placeholder="请选择检测项" :allowClear="false" :style="{width:width+'px'}" @change="onChangeTestItemCode"/>2、在onchage里,获取字符的个数,然后乘以每个字符的宽度,比如我这里的fo原创 2022-03-04 08:52:07 · 2206 阅读 · 0 评论 -
ant design vue:动态合并表头
<template> <!-- 动态合并表头 --> <div> <a-table :columns="columns" :data-source="data" bordered :customRow="customRow"> </a-table> </div></template><script> export default { name: "dataQuery", data.原创 2022-01-09 10:41:23 · 1548 阅读 · 0 评论 -
ant design vue:表格隔行换色
<template> <div> <a-table :columns="columns" :data-source="data" bordered :customRow="customRow"> </a-table> </div></template>methods: { //设置表格隔行变色 customRow(record, index) { return { style: {.原创 2022-01-09 10:35:29 · 983 阅读 · 0 评论 -
JavaScript:正则表达式去掉空的children
使用ant design vue的级联选择,后端返回的数据包含了空的children,导致前端下拉选项中有空白项,使用正则表达式可以去掉空的children。var jsondata = JSON.parse(JSON.stringify(res.result).replace(/\"children"\:\[]/g, "\"no\":0"));...原创 2021-12-14 15:37:27 · 301 阅读 · 0 评论 -
ant design vue:表头合并
x1-x8一共是8列,需要合并成一列,把x1的colSpan设置为8,x2-x8的colSpan设置为0。columns: [{ title: '日期', dataIndex: 'date', key: 'date' }, { title: '批次号', dataIndex: 'batchNo', key: 'batc.原创 2021-11-26 16:15:08 · 1031 阅读 · 0 评论