随笔分类 - element ui
element ui
摘要：vue2.6 sass全局变量配置 安装sass-loader npm install sass-loader@8.0.2 --save-dev vue.config.js中配置 module.exports = { css: { loaderOptions: { sass: { prependDa
阅读全文
摘要：需求描述 要求输入框输入0-100之间的数据，需要保留2位小数。 输入框是通过v-for渲染的，需要动态添加一个change事件。 问题分析 使用文本输入框，监听输入框的change事件，然后使用toFixed方法保留小数位。 问题解决 普通输入框 <el-input v-model="form1.
阅读全文
摘要：需求描述 el-tree组件节点默认展开，单击节点不会触发伸缩，双击节点获取当前节点的数据。 问题解决 el-tree 默认展开并设置阻止单击节点自动展开或收缩 <el-tree default-expand-all :expand-on-click-node="false" @node-click
阅读全文
摘要：问题描述 在使用elementUI开发，想要对dialog进行二次封装，可以实现一个类似v-model双向绑定的功能。 问题分析 v-model其实就是一个语法糖，它实际上做了两个动作： 绑定数据 value 触发输入的input事件去修改value <input type="text" :valu
阅读全文
摘要：问题描述 使用elementUI（v2.13.2）开发过程中使用el-table渲染列表，需要控制table的最大高度，达到溢出滚动的效果。 问题解决 参考element文档，可以使用 max-height属性（Table 的最大高度。合法的值为数字或者单位为 px 的高度），于是可以设置一个具体的
阅读全文
摘要：需求描述 vue-element-admin开发过程中需要对el-table行进行排序（即每一行可以上下移动），然后将排序后的数据传给后台更新数据。该表格无分页。 问题分析 方法一：可以采用在每条数据中加两个上下移动的按钮，每次移动一行。该方法实现简单，不过要连续移动的时候需要多次调用接口，交互效果
阅读全文
摘要：问题描述 使用vue-element-admin开发过程中需要将el-table中的数据导出为excel 问题解决 安装库 npm i file-saver xlsx -S 引入库 import FileSaver from 'file-saver' // full import import *
阅读全文
摘要：问题描述 el-table刷新后table出现抖动现象，而且如果使用了排序功能，点击排序后table抖动渲染后排序的选中状态图标消失了。 问题分析 <el-table-column :key="index + Math.random()" // 注意！！！ > 渲染时key使用了Math.rando
阅读全文
摘要：el-table组件去掉滚动条 .el-table__body-wrapper::-webkit-scrollbar { width: 0; } 如果是多个table拼接在一起，即使设置了width:0; 若出现滚动条table之间依然有一条线，此时可以判断是否出现滚动条，若存在滚动条就给table
阅读全文
摘要：问题描述 在一个表格中需要计算金额合计，合计的金额如果过长需要溢出隐藏并且显示title <!-- index 是tableData循环的下标--> <el-table ref="tableRef" :data="tableData" show-summary :summary-method="va
阅读全文
摘要：问题描述 需求：el-select多选以tag展示时，超过显示长度以...省略号显示。 注意： ① 一个tag文字过长需要溢出隐藏，超出部分... 显示 ② 多个tag卡片溢出隐藏，超出部分...显示 问题分析 单行文字溢出隐藏 overflow: hidden; text-overflow: el
阅读全文
摘要：问题描述 el-upload上传文件删除再次上传，上传列表中会出现重复数据。只有新增上传时才会出现这样的问题，修改时因为有了一条数据所以不会出现问题。 // 问题代码 <file-upload multiple :file-list="param.fileList || []" ></file-up
阅读全文
摘要：问题描述 el-table中有些列需要编辑，有些显示文本，需要对编辑的列做特定样式处理 问题解决 <el-table :data="tableData" :cell-class-name="cellClsNm" > 属性为editable的一列的td上添加有一个 td-edit-cls的类 cell
阅读全文
摘要：问题描述 使用el-table结合tree结构和CheckBox实现二级复选框的全选与反选。 页面结构 <el-table :data="dataList" highlight-current-row row-key="auditTypeId" :expand-row-keys="expandKey
阅读全文
摘要：问题描述 element-admin中使用tab切换到不同的路由，发现每次切换tab路由都会执行两次生命周期 <tabs :tabs="tabs" v-model="activeName" @on-switch="handleSwitch" > <components :is="activeName
阅读全文
摘要：问题描述 页面需要动态计算table高度，在computed属性中使用了$refs但是无法得到一个可用的数据 问题分析 computed中 return一个常量时不会再触发数据双向绑定，一开始$refs无效，此时computed属性返回了一个常量值，所以后续不在触发。 问题解决 // 使用setTi
阅读全文
摘要：问题描述 el-table显示树形数据报错 Error: for nested data item, row-key is required TypeError: this.$el.querySelectorAll is not a function 问题分析 后端返回的树形结构中没有返回id字段，
阅读全文
摘要：问题描述 需求是在table中使用日期组件，table是已经封装好的，通过render渲染el-date-picker组件 问题解决 页面渲染 // 注意 :column="item" 其中item是tableData的一项 <template slot-scope="scope"> <ex-slo
阅读全文
摘要：问题描述 一个可编辑的table，新增时把所有的数据都传给后端，修改时候把修改的几条数据传给后台。 问题分析 传给后端一个list，list中包含id和name属性，可以考虑使用es6的map数据结构，id作为可以，name作为value，比如 map.set(id, name) // 新增初始化数
阅读全文
摘要：el-table排序的问题 <el-table ref="tableList" :data="tableData" :default-sort = "{prop: 'date', order: 'descending'}" @sort-change="sortChange" > <el-table-
阅读全文
浙公网安备 33010602011771号