vue
weixin_51565477
这个作者很懒,什么都没留下…
展开
-
vue封装steps组件(自适应)
stepsModel组件<!-- Step.vue --><template> <div class="stepOut"> <!-- 步骤条 --> <ul> <li class="stepItem" v-for="(stepItem, index) in stepInfo.list" :key="index"> <!-- 圆圈 --> <di.原创 2022-04-19 14:51:41 · 1785 阅读 · 0 评论 -
vue中video标签,仅允许一个播放,其余暂停播放;vue获取不到video.length
template结构(video动态生成)<div v-for="(item, index) in List" :key="index"> <video controls :src="item.url"></video> </div>methods 函数vue中获取video标签集合videos,输出videos.length为0,必须使用this.$nexTickfor循环注意使用闭包或者自定义属性解决循环之后只给最后一个元素绑定.原创 2022-03-17 13:15:09 · 2232 阅读 · 0 评论 -
iview根据接口动态设置table列的显示隐藏
moutedthis.setHandleColumns()methodssetHandleColumns() {// 调用判断接口 this.XXX可以获取到后台返回的数据,根据后台返回数据实现是否显示 this.XXX().then(res => { this.handleColumns() })},//过滤表头handleColumns(){ if(判断数据){ this.tableColumns = this.tab..原创 2022-01-17 15:09:28 · 1243 阅读 · 0 评论 -
vue点击按钮拷贝文本网址(iview)
template<Form ref="formInline" :model="formInline" :rules="ruleInline"> <FormItem style="width:560px" class="copyConnect" prop="url" > <Input v-model="formInline.url" type="textarea" :rows="4"/> <button @click="to.原创 2021-11-24 09:24:28 · 755 阅读 · 0 评论 -
el-upload多张图片上传回显删除
templatesetImag是获取url进行回显,这是根据后台返回数据写的(怎么写看后台数据结构是什么样的)<el-table-column prop="pic" label="服务图片" > <template slot-scope="scope"> <img :src="scope.row.pic?setImag(scope.row.pic): null" style="width:80px;height:60px"/>..原创 2021-09-07 09:13:54 · 1351 阅读 · 0 评论 -
vue使用element三级联动下拉框多选
选中高级软件和软件ui工程师之后,一级中的金融和工程也高亮了,这是因为后台返回数据的id(这里后台返回的categoryId值重复)值重复了template<el-form-item label="职位类别:" prop="listJobCategoryDTOLIN"> <el-cascader :change-on-select="false" :props="defaultParams" :options="options" ..原创 2021-09-01 09:52:17 · 1602 阅读 · 0 评论 -
el-upload自定义上传样式 el-upload上传后回显为表格数据
templateaction 必选参数,上传后台接口地址data 上传时附带的额外参数(图片2)on-success 上传成功执行函数headers 设置上传的请求头部multiple 是否支持多选文件,可以不写:limit=“3” 最大允许上传个数,可以不写<div> <div class="medical-title"> <p class="card-title">体检报告</p> <el..原创 2021-08-31 09:51:34 · 2814 阅读 · 2 评论 -
el-dialog自定义样式 清除表单 自定义表单验证
template:show-close="false"是关闭默认的X号,slot="title"自定义一个X@close是弹窗关闭会触发,@close='closeDialog’关闭之后清空验证<!-- 按钮 --> <el-row class="btn-list"> <el-button @click="dialogVisibleClick">新增</el-button> </el-row><!-- 新增弹窗 .原创 2021-08-17 14:31:17 · 512 阅读 · 0 评论 -
elementui table 第一列内容相同 自动合并单元格 el-table第一列内容相同自动合并
template( :span-method=“objectSpanMethod”)<!-- 表格 --> <el-table :data="tableData" style="width: 80%; margin: 20px" :header-cell-style="{background: '#F8F8F8', height: '40px', padding: '0', color: '#333333'}" border .原创 2021-08-17 09:45:15 · 1808 阅读 · 1 评论 -
el-table翻页记录已选状态 el-table翻页回显记录已选状态
需求:点击第一页选中三条数据,点击第二页选中1条,再点击第一页显示选中的三条…template@selection-change="selectionTableDtaChange"是勾选会触发的事件:row-key="getRowKeys是跨页多选row-key"type="selection"设置为:reserve-selection="true"<el-table ref="elderTable" :data="elderData" style="width:100%" v-loadi.原创 2021-08-13 11:17:19 · 944 阅读 · 0 评论 -
el-input限制只输入数字,elment后一个输入框大于第一个输入框值,elment两个表单关联
template <el-row :gutter="14" style="display: flex"> <el-form-item label="发送对象" prop="startObj"> <el-input v-model="bulletin.startObj" type="number" style="width:100px" /> </el-form-item>...原创 2021-08-11 17:39:54 · 2030 阅读 · 1 评论 -
el-table自定义表头样式 两个标题并且标题颜色不同
<el-table :data="disabilityData" id="table" border :header-cell-style="{background:'#F7F7F8', color:'#18191B'}"> <el-table-column type="index" label="序号" width="50" align="center"></el-table-column> </el-table>关键代码...原创 2021-08-11 17:28:51 · 3367 阅读 · 0 评论 -
el-input 显示剩余字数 elment表单显示剩余字数 textarea显示剩余字数
template<el-form :model="bulletin" :rules="rules" ref="ruleForm" label-width="200px" class="demo-ruleForm"> <el-form-item label="模板内容:" prop="content"> <div class="form-conten"> <el-input type="textare..原创 2021-08-11 17:19:37 · 903 阅读 · 0 评论 -
echarts刷新不显示 报错Component series.pictorialBar not exists. Load it first
× Error: Component series.line not exists. Load it first.错误引入import echarts from "echarts/lib/echarts"import 'echarts/lib/chart/bar'import 'echarts/lib/component/tooltip'正确import 'echarts/lib/chart/bar'import 'echarts/lib/component/tooltip'import原创 2021-07-28 17:46:41 · 1066 阅读 · 1 评论 -
echarts异形图 异形柱状图
<template> <div class="institutions"> <div ref="chart" style="width:100%;height:100%"></div> </div></template><script>import echarts from "echarts/lib/echarts";import 'echarts/lib/chart/bar'i.原创 2021-07-23 17:15:10 · 836 阅读 · 0 评论 -
vue highcharts 3d环形图
安装npm install -S vue-highchartsmain.js引入import Highcharts from 'highcharts' import Highcharts3d from 'highcharts/highcharts-3d' Highcharts3d(Highcharts)静态测试代码<template> <div class="charts" style="width:100%;height:100%"> ..原创 2021-07-23 15:45:32 · 1229 阅读 · 1 评论 -
vue动态加载本地背景图(v-for循环背景图)
template中 :style="item.imageUrl<div class="resources-box" v-for="item in aginList" :key="item.id" :style="item.imageUrl"> <div> <CountTo class="number" :startVal='0' :endVal='item.value' :duration='1000'></CountTo&..原创 2021-07-23 15:31:20 · 3095 阅读 · 0 评论 -
el-upload单张图片上传回显替换
<el-form :model="bulletin" ref="bulletin" label-width="90px"> <el-form-item label="头像:"> <el-upload class="upload-demo upload" drag :show-file-list="false" :action="uplo..原创 2021-06-24 15:35:10 · 2074 阅读 · 0 评论 -
echart 详细配置(vue脚手架)
echart 详细配置(vue脚手架)通用配置<template> <div> <div ref="main" style="width: 100%;height:400px;"></div> </div></template><script>import echarts from 'echarts'export default { name: 'AskFor', mounted ()原创 2021-04-20 16:27:25 · 176 阅读 · 0 评论 -
vue的mixins
①创建base.jsbase.js存放我抽离出来的数据或者方法,这里再src/api/base.js(路径随意)加入组件中有一个方法onSunmit,base.js中也有一个相同的函数onSunmit,那么采用就近原则进行调用,即调用组件自身的函数const baseMinxin = {// 公共数据 data () { msg: 12345 }, methods: { // 公共方法 onSunmit () { console.log('点击查询', t原创 2021-01-28 15:03:08 · 107 阅读 · 0 评论 -
vue-cli+ElementUi
安装vue安装webpacknpm install webpack -g安装webpack-clinpm install webpack webpack-cli -g安装vue-clinpm install vue-cli -g创建项目vue init webpack 项目名原创 2020-11-24 08:38:44 · 117 阅读 · 0 评论 -
脚手架使用Moment.js
安装moment官网npm安装npm install moment引入(在)import moment from 'moment'使用this.month.yue=moment(this.month.stime).format('M');this.month.ri=moment(this.month.stime).format('D');原创 2020-11-10 19:15:41 · 132 阅读 · 0 评论