table表格，这个东西大家肯定都不陌生，代码中我们时常都能碰到，那么给table加一个斜线的表头有时是很有必要的，但是到底该怎么实现这种效果呢？我总结了以下几种方法：1、最最最简单的做法直接去找公司的UI，让她做一张图片，作为背景图片放到这里，然后撑满就可以了。是不是很简单！！！2、相当简单的做法其实了解css3的朋友，一看到这个效果，脑子中瞬间出现的就是transform这个属性，是的，这个确
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、实现基本table的封装二、如何食用总结 前言最近一个技术考核要实现 使用vue不依赖任何UI实现 封装一个公共的 table组件，基本的table功能，表头，行，列功能，api用法参看elementUI/antUI,实现固定表头和列实现按照列排序，实现合并单元格，花了我三天时间，也在网上看了很多资料，废话不多少，看
转载
2024-06-24 09:21:00
2094阅读
最近新项目使用antd1.6版本进行的开发，相比之前项目1.5的版本，很多组件都进行了调整。项目开发中form表单用的频率比较高，今天做一下总结！首先说下1.5的版本吧，1.5版本的时候表单组件一直用的form，当时感觉还行，相比elementUI差异还是比较大，尤其对值的操作和表单的校验，简单上一下代码说明一下<!-- 模板 -->
<a-form :form='form'&g
转载
2024-03-16 09:49:35
869阅读
在 columns 中定义表头样式 因为设置 样式 display 为 none 会导致页面元素塌陷 所以想了下面的方法 把 title 去掉 width 宽度置为 0 达到所要的效果 { title: policyNoTypeToTable == '0'? '支付方式' : '', // 根据特定 ...
转载
2021-09-26 17:14:00
4766阅读
2评论
目录vue 之 watch 的运用watch 的作用是什么？watch 的使用场景：watch 与 $watch 的参数：watch 的用法：1. 通过键路径进行监听数据的变化2. 通过函数进行监听数据的变化3. 通过对象的方式进行监听数据的变化4. 通过数组的方式监听数据的变化vue 之 watch 的运用watch 的作用是什么？1. 观察 vue 实例上一个表达式或者一个函数计算结
需求 最近接到的一个需求，在table栏中实现属性的可编辑单元格，并且table内部可动态删减的单元格，外部操作新增或删除一行新旧数据的操作，无交互的前端实现，这篇文章希望对你有帮助。想法或思路如何去实现这一功能，无非是数组的增删改查 1、规则模块单独抽离出来，封装成一个公共组件，实现代码的可用性，在今后的开发中，没有局限性的限制，整个团体都可以使用你开发的东西，这是一个循序渐进的过程。 2.开发
转载
2024-05-20 21:57:38
283阅读
1.使用场景项目用到的是 Ant Design Vue （2.2.8） 组件库，开发中遇到一个如下图的表格，有些表头文本后面会有一些自定义图标，鼠标移入图标时显示对应的审批时间提示。当前列如果没有审批时间就会隐藏图标，只展示列头文本。2.解决方案使用 Ant Design Vue 基础的 Table 组件是无法满足这个场景的，所以需要自定义表头的内容，这里就要用到定义表格列时的一个属性—— slo
转载
2024-03-25 07:07:23
3422阅读
1.antd Upload默认值问题需求是这样的，后台若没有图片默认值，则只有上传按钮，且只能上传一张图片；若有默认值，则显示默认头像图片， 可删除，删除之后有且只能添加一张图片，没有删除默认图片时不能添加图片坑爹之路漫漫----- 图为无默认值时状态图为有默认值状态，删除后可添加图片首先设置defaultFileList,但是defaultFileList并不会默认添加到fileLis
1,什么是ant
ant是构建工具
2,什么是构建
概念到处可查到，形象来说，你要把代码从某个地方拿来，编译，再拷贝到某个地方去等等操作，当然不仅与此，但是主要用来干这个
3,ant的好处
跨平台 --因为ant是使用java实现的，所以它跨平台
使用简单--与ant的兄弟make比起来
语法清晰--同样是和make相比
功能强大--ant能做的事情很多，可能你用了很久，你仍然不知道它能有多少
前言：最近重构的项目中有这样一个页面，一个固定表头和列的表格，表格列数较多，大概有60多列，200多条数据，而且表格需要实现拖拽滚动功能。 原页面的表格是用的一个比较老旧的表格插件实现，拖拽滚动是用iScroll.js实现的，性能很差，即使每页只有二、三十条数据，拖拽起来也严重卡顿。我首先使用了element-ui自带的的table组件实现了拖拽滚动的功能，性能稍微比老页面强了一点，每页50条数据
vue.draggable 拖拽项目需求中，需要支持拖拽，即找到了vue.draggable，下面来说一下基本使用方法 1.首先需要安装它，官网地址 https://www.itxst.com/vue-draggable/tutorial.html 2.安装 npm i -S vuedraggable 3.基本教程请看官网例子 我这边是根据后端接口请求的数据进行布局与官网例子稍有不同 我们首先看一
转载
2024-05-15 20:35:47
2357阅读
前言vue作为前端主流的3大框架之一，目前在国内有着非常广泛的应用，由于其轻量和自底向上的渐进式设计思想，使其不仅仅被应用于PC系统，对于移动端，桌面软件(electronjs)等也有广泛的应用，与此诞生的优秀的开源框架比如elementUI，iView， ant-design-vue等也极大的降低了开发者的开发成本，并极大的提高了开发效率。笔者最初接触vue时也是使用的iview框架，亲身体会之
转载
2024-02-26 06:41:26
124阅读
一、table表格标签 1. 表格的主要作用 表格主要用于显示、展示数据，因为可以让数据显示非常规整，可读性好。简单来说表格不是来布局的，而是来展示数据的。 2. 表格的基本语法--表格由三部分组成 1. <table> </table> 是用于定义表格的标签。 2. <tr> </tr> 标签
转载
2024-03-18 09:50:07
97阅读
背景：官方和网上的例子都很简单，实际项目开发中比较的一般都是对象数组，且属性值不一定全为数值，有可能为字符串,比如某个数据没有值，默认显示字符串："--" 需求：降序或者升序无数值的在最后面显示 开发步骤： (1)HTML：<a-table @change='compare' :columns='c ...
转载
2021-08-05 14:20:00
1041阅读
2评论
Ant Design Vue和VUE3下的upload组件使用以及文件预览 文章目录Ant Design Vue和VUE3下的upload组件使用以及文件预览一、多文件上传1.需求2.样例3.代码二、单文件上传1. 需求2. 样例3.代码二、多文件上传产生的时间超时问题三、文件系统名称更改1. 修改文件`index.html`2. 修改文件`index.js`3. 修改数据库存储的系统名称四、系统
转载
2024-06-20 17:24:23
98阅读
刚接触Ant Design Vue的童鞋们可能会有这样的问题，不就是修改默认的组件样式吗，为什么一会生效，一会又不生效。希望看完这个文章，会给你一些收获~一、想要修改组件的默认样式，首先你需要知道组件是渲染在哪里的这个组件是渲染在当前页面内部，还是脱离vue根节点单独渲染？（根节点默认id=“app”）这个问题的答案很容易得到，打开文章顶部的antdv官方文档，任意选中组件，F12打开调试，观察E
转载
2024-05-30 23:23:17
362阅读
记录一下，使用
Ant Design Vue a-tree 需要实现可搜索且后台返回数据不是标准数据的问题
目录
可搜索 自定义字段
完整全部代码
可搜索 自定义字段
实现自定义字段需要使用 Tree props 的 replaceFields 属性
<template>
<div>
转载
2024-04-05 00:00:57
60阅读
背景项目需要表格支持拉伸每列的宽度，查看了文档，官方建议是用 vue-draggable-resizable 插件结合 components 属性，给表头 header 增加一个可拖拽的功能。其实下面的前三个问题都很好解决，网上也有很多解决方案，但因为考虑到项目中表格很多，而且每个表格都要支持拉伸列宽度，所以不可能按官方文档那样，每个表格的 vue 组件都写重复的代码，所以就封装了一个方法，专门获
转载
2024-07-24 09:52:03
2519阅读
前端高频面试题整理
css相关1.万能居中1.margin: 0 auto;水平2.text-align: center;水平3.行高，垂直4.表格，center,middle；水平垂直5.display:table-cell；模拟表格，all6.绝对定位，50%减自身宽高7.绝对定位，上下左右全0，margin:auto8.绝对定位加相对定位。不需要知
问题在使用Ant Design Vue进行开发的时候，使用了tabs标签页，在页里面套用了表格，但是在页面切换后，会发现页面的width会变大差不多2倍，这样会导致页面一些结构的样式发生变化。解决在查阅一些资料之后，看到有人说可能是Ant Design在进行table封装时使用了自适应的问题，解决方法就是在外层盒子加上绝对定位。 于是，我在外层盒子添加绝对定位:position:absolute;
转载
2024-03-02 08:37:15
193阅读
