Vue3.0
前端老实人
一名前端狂热爱好者,有需要资料或者有问题的同学可以直接私信我哦,做你的私人小家教!
展开
-
post请求设置表单form-data格式的几种方式
我用默认的post方法发送数据的时候发现后端获取不到数据,然而在network中看到参数是的确传出去的了。而且用postman测试的时候也是可以的,比较了下两个的不同发现是postman使用的是form-data格式,于是用form-data格式再次请求,发现OJBK这两种格式都是无法使用的:方法一:配置transformRequest缺点:其他请求格式的数据也会被重新格式化(PUT,PATCH)import axios from "axios" //引入//设置axios.原创 2022-05-10 17:02:02 · 17247 阅读 · 0 评论 -
Ant Vue a-select选择器修改样式
在使用阿里的 Ant Design Vue时,在使用有下拉菜单 a-select 等组件,会发现更改不了样式分析原因通过仔细查看Dom元素可以发现,官方Select选择器下拉框是直接插入body标签中,与最外级id为app的div同级,所以在Vue中无论怎么写css都无法覆盖到下拉框样式。a-select 代码需要这么写<a-select :getPopupContainer="(triggerNode) => triggerNode.parentNode" ><.原创 2022-05-10 15:25:25 · 3387 阅读 · 0 评论 -
Ant Vue如何导出表格Excel
1.安装依赖1. $ npm install -S file-saver xlsx2. $ npm install -S script-loader2.引入必备文件在 excel文件夹目录Blob.js文件原创 2022-05-09 17:20:58 · 931 阅读 · 0 评论 -
vue3+vite动态遍历加载图片
<div class="header-menu-list flex ac" v-for="(item, i) in header" :key="item.title" > <div class="header-img"> <img :src="getimg(i)" alt="" /> </div></div><script..原创 2022-04-02 15:14:10 · 1724 阅读 · 4 评论 -
element-plus 使用 el-carousel 跑马灯默认第一页不显示
因为刚开始页面渲染数据还没加载过来,所以第一页无数据。只要el-carousel-item里的for循环有默认长度即可: <el-carousel :autoplay="false" arrow="never" indicator-position="none" :loop="false" v-if="steam.heatPumpCrews[0].shebeiMingZi" //加上这句没数原创 2022-03-30 17:52:40 · 3488 阅读 · 7 评论 -
Ant Design Vue表单验证基本操作
通过rules属性传入约定的验证规则。并将 <a-form-item>的prop属性设置为需校验的字段名即可formRef.value .validate() 触发效验提示通过进入then,否则进入catchformRef.value.resetFields() 清空效验红色提示labelCol:label 标签布局,同 <Col> 组件,设置spanoffset值,如{span: 3, offset: 12}或sm: {span: 3, off...原创 2022-02-18 15:31:45 · 11400 阅读 · 5 评论 -
Ant Design TreeSelect树形选择器格式化数据以及禁用父节点
效果图:灰色的父节点是被禁用不能点击的关键代码:格式化后台数据和禁用点击父元素<a-tree-select v-model:value="value" //uid唯一值 tree-data-simple-mode //使用简单格式的 treeData style="width: 70%" :dropdown-style="{ maxHeight: '400px', overflow: 'a...原创 2021-11-26 14:24:08 · 4676 阅读 · 1 评论 -
ant design vue a-table 表头和内容不对齐,一行代码解决问题
动态设置x轴的长度就可以了,有几列表头就设置成百分之几,完美~<a-table :columns="columns" :data-source="data" size="small" :loading="loading2" :scroll="{ x: `${columns.length}0%`, y: 400 }"//关键代码 >...原创 2021-11-24 16:32:10 · 3703 阅读 · 6 评论 -
Ant Design Vue如何上传文件、图片,复制即用
文档介绍的关键参数:beforeUpload 上传文件之前的钩子,参数为上传的文件,若返回false则停止上传。支持返回一个 Promise 对象,Promise 对象 reject 时则停止上传,resolve 时开始上传( resolve 传入File或Blob对象则上传 resolve 传入对象)。注意:IE9 不支持该方法。 (file, fileList) =>boolean | Promise 无 上传的组件:<a-upload-drag...原创 2021-11-22 16:50:05 · 5672 阅读 · 15 评论 -
Ant Design Vue 给table表格行加点击事件
首先官方定义的是customRow设置行属性customRow 设置行属性 Function(record, index) 官网上会给出这么使用:customRow 用法适用于customRowcustomHeaderRowcustomCellcustomHeaderCell。遵循Vue jsx语法。<Table customRow={(record) => { return { xxx... //属性 onClick...原创 2021-11-16 16:32:14 · 10935 阅读 · 0 评论 -
Vue-Router总结大全,从小白到精通,含vue3.0路由用法
诚心特邀各位小伙伴加入:CSDN大前端交流社区https://bbs.csdn.net/forums/WebLSR快来跟前端人一起交流学习吧,致力营造成资源共享型社区。目录前言使用捕获所有路由或 404 Not found 路由编程式导航命名视图别名路由组件传参不同的历史记录模式导航守卫全局前置守卫全局解析守卫全局后置钩子路由独享的守卫组件内的守卫完整的导航解析流程路由元信息数据获取 数据获取 | Vue Router (v...原创 2021-11-03 15:42:18 · 5696 阅读 · 18 评论 -
Ant Design Vue 树选择冲突 4063:34 Warning: Conflict value of node (xxx) has already used by node
TreeSelect的node节点value值冲突了。参考官方这2个value的值不可相同,相同会报这个警告。我的解决方法:打印一下你的treedata查看是否有和children的value相同的的问题,找到相同的改名字就可以了。原文:https://blog.csdn.net/weixin_40933180/article/details/112579484...原创 2021-11-01 15:45:52 · 9035 阅读 · 2 评论 -
Ant Design Vue表单自动填充账号密码问题
问题:打开表单账号密码会自动填充原因:现代浏览器实现了内建的密码管理功能:当用户在一个网站上输入了用户名和密码,浏览器会为用户提供记忆功能。当用户再次访问这个网站时,浏览器使用保存的值自动填写登录字段。解决方案: <a-input type="password" v-model:value="formState.password" autocomplete="new-password" />我是在密码框加入了autocomplete="new-password",.原创 2021-10-27 14:25:11 · 3515 阅读 · 1 评论 -
Ant Design Vue自定义对话框Modal
这个是自定义的: <a-modal v-model:visible="visible" title="设置DAG图名称" @ok="handleOk"> <template #footer> <a-checkbox style="float: left;" v-model:checked="checked2">是否更新流程定义</a-checkbox> <a-button key="back" @原创 2021-10-23 16:38:34 · 2250 阅读 · 2 评论 -
vite.config.js如何配置多个跨域
vue3.0根目录下vue.config.js文件export default defineConfig({ server: { proxy: { // 字符串简写写法 '/foo': 'http://localhost:4567', // 选项写法 '/api': { target: 'http://', changeOrigin: true, rewrite: (path) => p.原创 2021-10-21 16:08:56 · 4995 阅读 · 0 评论 -
Ant Design Vue 日期选择器,绑定的日期和框内不一致,日期格式化,纠正时差
这个格式只作用在了前端日期显示上,并没有改变传回后端的数据格式。经历这是一个日期选择器<a-range-picker style="width: 400px" v-model:value="shijian" :ranges="ranges" //预设时间范围快捷选择,会在左边出现小蓝框 :disabled-date="disabledDate" //不可选择的日期 :disabled-time="disa原创 2021-10-14 18:23:32 · 2508 阅读 · 1 评论 -
ant design vue 设置表格选择框,全选按钮选不全
左侧勾选框 你需要配置 :row-selection="rowSelection" <a-table :pagination="false" size="small" :row-selection="rowSelection" :columns="columns" :data-source="data" :scroll="{ x: 1100 }" :rowKey="id" //全选是根据这个id判断的,一定要原创 2021-10-12 10:52:33 · 2751 阅读 · 0 评论 -
Vue3.0的多种侦听方式
目录一、wacthEffect二、watch1.1第一种方式侦听1.2第二种方式侦听1.3侦听多个数据源一、wacthEffect立即执行,没有immediate 侦听,watchEffect是立即执行的,没有immediate,不需要传递侦听的内容,自动会感知代码依赖,不需要传参,只需要传一个回调函数不能获取之前的值 如果需要停用侦听器,可以回调这个侦听器函数const stop = watchEffect(()=>{ // console.log原创 2021-10-08 18:03:16 · 817 阅读 · 2 评论 -
VUE3.0 在父子组件中相互触发组件的函数方法
1. 父组件触发子组件的方法这个是父组件的代码:<template> <Layouts ref="RefChilde"> //第一步写ref <router-view> </router-view> </Layouts></template><script>import Layouts from "./layouts/Layouts.vue"; //引入子组件export de原创 2021-09-30 11:27:50 · 1016 阅读 · 0 评论 -
vue3.0解决跨域问题Access to XMLHttpRequest at ___has been blocked by CORS policy: No ‘Access-Control-Allow
1,vue3.0根目录下创建vue.config.js文件2,将代码块写入其中module.exports = { devServer: { proxy: { '/api': { target: 'https://blog.csdn.net/', //接口域名(你请求的第三方接口) changeOrigin: true, //是否跨域 (虚拟的站点需要更管orig原创 2021-09-29 16:31:31 · 3455 阅读 · 0 评论 -
Ant Design Vue子表格无法展开
最近使用ant_desgin 做嵌套子表格数据的展示。 发现写好了点击展开子表格无法展开,最后发现是从后端给的数据没有id号因为之前的数据都绑定这id所以可以展开,展开应该是根据唯一值rowkey的 <a-table :expandRowByClick="true" :columns="columns" :data-source="datas" :row-key=原创 2021-09-27 10:47:14 · 790 阅读 · 0 评论 -
Ant Design Vue子表格展开只展开一行,其他行折叠
背景因为我的子列表数据都是用的一个变量,所以需要折叠其他的,要不然多个表格展开后,数据渲染都是一样的下列列表是只可以展开一列的:第一步:直接抄我箭头指的那三行即可:row-key="(record)=>record.id" 这个主要用于获取id@expand="zi" 这个为了得到展开行的数据:expandedRowKeys="expandedRowKeys" 这个是负责控制行的展开与关闭,(这个变量是以数组的形式展示,谁的id在数组里就...原创 2021-09-26 18:33:46 · 5897 阅读 · 7 评论 -
快速入门vue3.0系列之生命周期及父传值,建议“收藏细品”,会持续更新!❤
目录生命周期父传子常用加值方法代码抽离生命周期组合式 API 上的生命周期钩子与选项式 API 的名称相同,但前缀为on:即mounted看起来像onMounted。setup() {//setup组合式api的入口函数,在beforeCreate之前执行 const count=ref(0) console.log('setup'); onBeforeMount(() => {//组件挂载到节点之前执行 console.l...原创 2021-09-21 20:31:51 · 1208 阅读 · 4 评论 -
快速入门Vue3.0!跟我入门第一天,一起来看看跟vue2的区别❤
目录1.setup2.ref3.reactive4.torefs:5.computedvue3.0可以有多个根节点1.setup函数的用法,可以代替vue2中的data和methos属性,compued属性,都是直接写在setup中就可以了//在script上加setup属性,组件编译过程中的代码运行是在setup函数中,所有es模块导出都认为暴露给上下文的值,并且包含在setup()返回对象中// 定义setup// setup是组件使用Composition.原创 2021-09-19 21:57:55 · 941 阅读 · 12 评论 -
vue + Ant Design之table自定义表格、添加操作按钮并获取当前行数据
今天搞了一下午可算搞懂了,网上我查了好多资料发现好像有点老了都比如这种的:<template slot="action" slot-scope="text,record"> <a slot="action" href="javascript:;" @click="onUser(record)">用户</a> <a slot="action" href="javascript:;" @click="onRole(recor原创 2021-09-16 16:47:43 · 13300 阅读 · 9 评论 -
Vue3.0再不学就out了!跟我入门第一天,含集成ts、router、vuex等使用方法
1. 如何在vue中集成tsvue-cli 创建项目时选择ts依赖yarn add typescript 进行安装vite 安装tsvite—>vue/vue-ts就可以直接写ts代码了可以学习下typescript—》点击蓝色字体跟我一起快速入门ts哦学了typescript之后再用ts的写法来写vue组件代码2. composition API 中 使用vue-router由于在setup中不能使用this, 因为setup在初始化之前执行的,所以setu原创 2021-09-07 17:22:21 · 917 阅读 · 10 评论