vue
MrsTing
这个作者很懒,什么都没留下…
展开
-
component :is实现动态组件
第二种方式:is是字符串。第一种方式:不需要引入。原创 2023-06-16 14:43:43 · 192 阅读 · 0 评论 -
使用jsMind实现可拖拽思维导图
1.安装依赖:npm install vue-jsmind2.在main.js中引入:import jm from 'vue-jsmind'Vue.use(jm)if (window.jsMind) { Vue.prototype.jsMind = window.jsMind}3.拖拽完成时间需要引入文件jsmindDrag.js,下载地址:https://download.csdn.net/download/qq_40364610/852185574.数据格式:{ "原创 2022-04-25 11:08:57 · 3965 阅读 · 2 评论 -
el-table增加顶部滚动条,表格实现上下双滚动条
效果图:实现方式:1.加一个div,宽度和表格相同:2.监听表格宽度,并给元素和滚动条元素绑定滚动事件:原理:两个滚动条滚动时,同时控制另一个滚动条滚动。tableWidth: { handler(newVal, oldVal) { // 监听滚动条 setTimeout(() => { this.tableDom = this.$refs.tableRef.bodyWrapper this.tableDom.addEventListener(原创 2021-06-17 13:46:21 · 3488 阅读 · 3 评论 -
vue监听节流处理
场景:关键字搜索查询数据,当搜索关键字一直处于点击加载,会重复追加数据的问题:解决方案:使用setTimeout进行节流处理:watch: { // 输入过滤条件的监听 chooseCondition: { handler(val, oldVal) { if(val.length > 0 && val.trim() == '' && oldVal.trim() == '') { } else { clear原创 2021-04-12 11:52:10 · 425 阅读 · 0 评论 -
el-form自定义验证
el-form表达中自定义验证,主要是在rules中使用validator声明自定义验证,并在data中进行写逻辑。例子。js代码如下:data() { // 自定义验证 const validTrim = (rule, value, callback) => { if (!value.trim()) { callback(new Error('请输入名称')) } else { callback() }原创 2021-01-21 08:52:59 · 1002 阅读 · 0 评论 -
el-table使用递归组件实现多级表头
<el-table ref="multipleTable" :data="tableData" max-height="430" style="width: 100%"> <el-table-column prop="schoolName" label="学科" align="center" :min-width="firstColumnWidth" fixed> <template slot="header" slot-scope="原创 2021-01-14 14:38:36 · 1765 阅读 · 4 评论 -
el-table fixed滚动条有缝隙
.el-table__fixed, .el-table__fixed-right { height: 100%!important;}原创 2020-12-16 18:59:09 · 882 阅读 · 0 评论 -
手动导出Echarts图表(兼容IE)
// 导出图表功能 handleExport(index) { let canvasImg = '' let imgName = '' canvasImg = document.getElementById("scatterEchart").getElementsByTagName("canvas")[0] let image = canvasImg.toDataURL("image/png") let $a = document.crea原创 2020-09-29 13:50:12 · 279 阅读 · 0 评论 -
el-table动态渲染不换行
<el-table-column prop="schoolName" label="教师名" :min-width="firstColumnWidth" fixed> <template slot="header" slot-scope="scope"> {{firstColumn(scope)}} </template></el-table-column><el-table-column v-for="(item原创 2020-09-29 11:59:42 · 645 阅读 · 2 评论 -
vue模块化创建指令directive实现el-select加载更多
1.在until下面创建directive.js文件注册 el-select-loadmore指令:import Vue from 'vue'// select懒加载(分页)指令const selectLoadMore = Vue.directive('el-select-loadmore',{ bind(el, binding) { // 获取element-ui定义好的scroll盒子 const SELECTWRAP_DOM = el.querySelector('.el原创 2020-09-29 11:47:40 · 378 阅读 · 0 评论 -
vue项目不支持IE
vue项目在IE浏览器运行报错:[vuex] vuex requires a Promise polyfill in this browser.解决方案:第一步:npm install babel-polyfill --save第二步:在main.ts中 import “babel-polyfill”:大写的警告:此处引入一定要引入到vue前面,否则无效,如图:...原创 2020-08-25 19:52:15 · 206 阅读 · 0 评论 -
treeselect使用
引入:import Treeselect from '@riophae/vue-treeselect'import '@riophae/vue-treeselect/dist/vue-treeselect.css'注册组件:components: {Treeselect},data() { return { normalizer(node) { // 去掉children=[]的children属性 respectively if (node.chi原创 2020-07-22 16:22:33 · 1580 阅读 · 0 评论 -
treeselect组件处理children=[]的情况
<treeselect :options="gridArr" v-model="form.gid" :disable-branch-nodes="true" :normalizer="normalizer" @select="onClickGid" placeholder="请选择最小单元" noOptionsText="暂无数据" style="width: 270px;"/>关键代码(该部分代码写在data中):data() { return { normaliz原创 2020-05-15 15:54:21 · 1720 阅读 · 0 评论 -
Element中el-select在form多数组中的使用
v-bind="{ remoteMethod: remoteMethod.bind(null,index) }"将当前的索引传递到方法中,告诉下面当前要修改的值: <el-select v-model="item.materialCode" filterable remote reserve-keyword no-data-text placeholder="请输入关键词" v-bind="{ remoteMethod: remoteMethod.bind(null,in原创 2020-05-15 15:48:49 · 927 阅读 · 0 评论 -
vue中导出和下载文件
html代码:<span @click.stop="downloadFile(item)">下载</span>js代码:import { downloadFile } from '@/utils/index'downloadFile(data) { //请求后台 qualityFile.downloadFile({ fileId: data.file.i...原创 2020-04-15 17:32:27 · 1244 阅读 · 0 评论