vue
曾经沧海海
这个作者很懒,什么都没留下…
展开
-
TreeSelect 回显
riophae/vue-treeselect回显原创 2022-12-15 11:24:26 · 1338 阅读 · 1 评论 -
el-tree 父组件数据双向绑定更新、on-check、check-change
<template> <div> <div> <el-input placeholder="Search" size="small" v-model="filterText" clearable @keyup.enter.native="onSearch" @clear="onSearch" ></el-input&g...原创 2022-02-23 20:05:55 · 1461 阅读 · 0 评论 -
父组件更新子组件未渲染更新
子组件通过prop绑定父组件数据;父组件更新后 发现子组件未更新解决办法: computed: { // 父组件更新数据 子组件未渲染更新 checkedMap: { get () { return JSON.parse(JSON.stringify(this.tableData)) } } },...原创 2022-02-23 20:03:40 · 418 阅读 · 0 评论 -
子组件undefined
打印了this.refs的值也是undefined;原因是 在http请求后 调用子组件 而http请求为异步的async diffExpand () { await this.$nextTick() // 存在渲染问题 this.$refs.diff && this.$refs.diff.setActiveKey(0) }...原创 2022-01-17 14:42:59 · 405 阅读 · 0 评论 -
el-tree 搜索高亮match部分
3.0以下不支持jpx通过slot-scope方式 <el-input placeholder="Search" size="small" v-model="filterText" clearable @input="onSearch" ></el-input> <el-tree ref="tree"原创 2021-12-14 15:27:11 · 1141 阅读 · 0 评论 -
el-table 设置识别换行后 icon折行
deep设置生效范围<style scoped lang="less">/deep/ .el-table .cell { white-space: pre-wrap;}</style>原创 2021-12-14 15:20:42 · 356 阅读 · 0 评论 -
vue-code-diff side-by-side 左右不对齐
解决方案:设置行高<style scoped lang="less">/deep/ .el-table .cell { white-space: pre-wrap;}/deep/ .d2h-info { height: 18px;}/deep/ .d2h-wrapper .d2h-code-side-line,.d2h-wrapper .d2h-code-line { height: 18px;}/deep/ .d2h-code-line-prefix,.d2原创 2021-12-14 15:17:43 · 1910 阅读 · 3 评论 -
vue table 监听键盘上下键
columnsName: [ { title: '姓名', key: 'name', align: 'center', sortable: true, width: 150, render: (h, params) => { return h('Input', { props: { ..原创 2021-07-26 19:45:00 · 869 阅读 · 0 评论 -
vue upload上传图片压缩
<template> <div> <div> <Upload type="drag" name="file" :show-upload-list="false" :before-upload="beforeUpload" :on-success="handleUploadSuccess" action="/xx/u.原创 2021-07-19 19:20:21 · 245 阅读 · 0 评论 -
echarts 叠加柱状图柱顶显示百分比
采坑: formatter不起作用:使用 formatter: function (params) 只能直接setOption,不能使用this.option 柱顶的百分比其实是一个另一截的柱,只是颜色为白色,值小于1;然后使用formatter: function展示为百分比 renderChart () { // 线上问题总量柱状图,按产研部门统计(如教学、服务运营) var chart1Line = echarts.init(docum...原创 2021-01-04 19:51:29 · 2185 阅读 · 0 评论 -
vue 自动保存功能 固定时间想服务器发请求
<Button style="background-color: #8A8A8A; color: #FFF;" @click="addDraft()"> 保存到草稿 </Button> data () { return { isEdit: false } } methods: { ...原创 2020-12-31 14:04:35 · 550 阅读 · 0 评论 -
vue 上传附件
<template> <div> <form action="/file/upload" method="post" enctype="multipart/form-data"> <label for="file">文件名:</label> <input type="file" name="up_file" @change="getFile($event)" /> <br /...原创 2020-09-07 10:24:32 · 248 阅读 · 0 评论 -
vue 组件交互
子组件调用父组件方法:$emit父组件调用子组件方法:$refs原创 2020-07-31 17:26:19 · 100 阅读 · 0 评论 -
表单配置 不断新增
<template> <Form ref="formDynamic" :model="formDynamic" :label-width="150" style="position:relative;left:1%"> <FormItem v-for="(item, itemIndex) in formDynamic.items" v-if="item.status==1" ...原创 2020-06-28 10:49:50 · 155 阅读 · 0 评论 -
js 进度条支持点击
<Steps :key="stepkey" :current="current" v-model="steps" size="small" style="margin-left:5%"> <Step v-for="(item,i) in steps" :key='item.name' :title='item.name' @click.native="goCurrent(i)"> </Step></Step...原创 2020-06-24 17:29:16 · 468 阅读 · 0 评论 -
js 正则限制输入框仅输入数字
仅支持输入数字、字母、.、@、_、-、空格var regu ="^([0-9a-zA-Z_.@ \-]+)$"var re = new RegExp(regu)if(item.value.search(re) == -1){ return false}原创 2020-06-24 16:10:20 · 652 阅读 · 0 评论 -
vue $ref 引用子组件方法时报undefine
说明:关于 ref 注册时间的重要说明:因为 ref 本身是作为渲染结果被创建的,在初始渲染的时候你不能访问它们 - 它们还不存在!$refs也不是响应式的,因此你不应该试图用它在模板中做数据绑定。$refs 只会在组件渲染完成之后生效,并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——应该避免在模板或计算属性中访问 $refs。...原创 2020-04-29 15:53:24 · 995 阅读 · 1 评论 -
axios http请求顺序执行
// 增加async属性 async openPlaybackUrl () { // 实现:getSucc返回数据后;继续下一步执行 var res = await this.getSucc() if (res) { } },...原创 2020-04-26 17:32:46 · 1446 阅读 · 0 评论 -
DatePicker 日期格式 双向数据绑定
DatePicker 实现双向数据绑定不能使用v-model 只能用:value on-change是需要的,把当前选择的日期传给value format="yyyy-MM-dd" 是date字段传给后端的日期格式<template> <DatePicker type="date" :value="date" f...原创 2020-04-20 14:05:27 · 2823 阅读 · 0 评论 -
vue 创建公共组件并引用
创建一个公共组件,然后提供给别的组件引用主要的难点:数据传递实践了一个简单的,上代码看注释引用的部分:<template> <div> <Modal v-model="showStatus" title="订正记录"> <!-- 引用Correction组件 可以当做标签使用,传入数据info 类似于标签...原创 2020-03-11 16:51:36 · 1126 阅读 · 0 评论 -
删除排序数组中的重复项
题解里看到的思路 值得学习两个指针,m n 判断m和n的值是否相等 如果相等,n向后移,m不动 如果不相等,将n的值赋值给m+1,m和n分别后移1位 最后return m的值即可function removeDuplicates(&$nums) { $m = 0; $n = 1; while ($n < sizeof(...原创 2020-03-11 16:29:04 · 89 阅读 · 0 评论 -
vue加载流程
原创 2020-02-27 15:50:13 · 660 阅读 · 0 评论 -
vue store sessionStorage localStorage 解决http请求异步
vuex store:数据存储是响应式的;数据放在内存里;生命周期是每次刷新会初始化个人理解就是store中的数据在发生改变后都会同步到所有使用的组件中; 比如:如果页面渲染有依赖这些数据,则会出发重新渲染 缺点:刷新则会初始化sessionStorage:会话缓存;存在浏览器里,生命周期是本窗口(一个标签页)sessionStorage仅对当前标签页有效(tab),当打开新的标签页...原创 2020-02-27 13:09:02 · 2490 阅读 · 0 评论 -
echarts 饼图展示百分比
固定展示:series: [ { type: 'pie', radius: '40%', center: ['25%', '50%'], // 展示百分比 label: { formatter:...原创 2020-01-07 15:02:25 · 1045 阅读 · 0 评论 -
vue 多选框 全选
<template> <div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;"> // 全选按钮的部分 <Checkbox // value来判断是否点亮全选框 :val...原创 2020-01-06 15:39:10 · 1251 阅读 · 1 评论 -
vue 遍历对象foreach for in
对象结构:info = {name: "xiaoming", age: 10, grade: "二年级"}foreach:Object.keys(info).foreach((value, key) => { console.log(value)})for in:for (let i in info) { console.log(info[i])...原创 2020-01-03 18:36:05 · 7443 阅读 · 0 评论 -
echarts 去掉网格线、设置渐变色、标题图表位置、反转
去掉网格线:splitLine yAxis: [ { // y轴不显示 axisLine: { show: false }, // 刻度不显示 axisTick: { ...原创 2019-12-26 11:03:22 · 1128 阅读 · 0 评论 -
echarts 图居中
template: <Card class="card-style"> <div class="siggle-chart" id="histogram" ></div> </Card>style:.card-style { height:...原创 2019-12-04 16:36:05 · 19867 阅读 · 1 评论 -
vue echarts做柱状图
template部分: <div class="siggle-chart" id="histogram" ></div>script部分:export default { name: 'FunctionStatistics', data () { return { ...原创 2019-12-04 16:20:08 · 789 阅读 · 0 评论 -
vue 实现日期选择器 DatePicker
实例:dateRange:选择完成的时间变量type:"daterange":是日期范围选择器,详见:DatePicker 日期选择器start-date:默认是当天,实例里设置的是30天之前,2592000000单位是msoptions:用于设置不可选的日期(置灰)split-panels:两面板在切换年月时不联动 <span> &...原创 2019-11-04 14:12:13 · 2293 阅读 · 0 评论 -
vue 监听输入框控制页面渲染
1、实现效果:输入框的值一旦发生变化,页面返回值内容则改变2、实现方案:通过bool值来判断watch: { uname (newValue, oldValue) { this.boolean = true this.dataList = [] this.userActInfoList = [] },}当输入值改变后,boolea...原创 2019-11-01 21:11:16 · 526 阅读 · 0 评论 -
package.json中dependencies和devDependencies的区别
package.json中dependencies和devDependencies的区别是什么解答:1、dependencies:应用能够正常运行所依赖的包,是生成环境需要的。2、devDependencies:开发环境所依赖的工具包。通常是一些开发、测试工具包,例如 webpack、eslint。3、当执行命令 npm install 没有任何参数时,会安装package.js...原创 2019-09-05 19:42:25 · 290 阅读 · 0 评论 -
vue v-bind和v-model的用法
<Input placeholder="请输入用户UID或手机号" v-bind:value="searchItem" />对于输入框input标签,如果把v-model替换成v-bind,此时在输入框中重新输入其他值,searchItem也拿不到新的输入内容所以总结如下应用场景:v-bind:用于修改html元素值,...原创 2019-09-05 19:37:17 · 880 阅读 · 0 评论 -
vue path.resolve()
为什么要使用path.resolve() 方法?解答:1)官网解释:path.resolve() 方法将路径或路径片段的序列解析为绝对路径。2)根据操作实例,path.resolve() 方法对参数中路径的操作也是为了达到拼接路径的效果;3)实际上得到的路径结果,相当于对参数路径进行了一系列”cd”操作,看下图实例path.resolve('path1', 'path2')...原创 2019-09-05 19:32:34 · 8500 阅读 · 0 评论 -
vue npm run dev 启动vue项目
1、找到 package.jsonscripts.dev2、进入 build/webpack.dev.conf.js 配置mergebuild/webpack.base.conf.js;进入 build/webpack.base.conf.js;找到程序入口 main.js3、main.js 创建vue实例4、el: '#app', 用于替换index.html 中...原创 2019-08-28 17:32:55 · 1231 阅读 · 0 评论 -
vue 收起列表-扩展组件
1、主列表js:<script>import http from '@/assets/http.js'import TaskExpand from './components/TaskExpand'export default { name: 'SearchTask', components: { TaskExpand }, data () { ...原创 2019-08-26 19:32:58 · 170 阅读 · 0 评论 -
vue 上拉加载
html:<template> <div> <Scroll :on-reach-bottom="handleReachBottom" :height="600"> <div class="record-info" style="min-width: 1000px;"> <Divider dashed...原创 2019-08-26 19:20:49 · 307 阅读 · 0 评论 -
vue实现点击按钮“查看详情”弹窗展示详情列表
html:<template> <div> <Modal v-model="classStatus" width="900" title="详情:" :styles="{top: '80px'}"> <Table stripe class="task-table" :columns="columnsName4" :data="...原创 2019-08-26 17:55:51 · 33220 阅读 · 1 评论