![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
elementUI
努力学习~冲鸭
这个作者很懒,什么都没留下…
展开
-
vue + elementUI 实现月份多选组件
月份多选、多选月份原创 2021-07-22 18:05:55 · 5335 阅读 · 25 评论 -
el-select 下拉输入搜索
el-select 下拉输入搜索原创 2022-05-05 11:38:56 · 6400 阅读 · 0 评论 -
el-table带其它参数的formatter格式化数据显示
1. el-table中使用带默认参数的formatter格式化数据显示:<el-table-column class="input-width" label="运营单位" prop="corpId" min-width="120" :formatter="formatCorp" />formatCorp(row) { return this.corpList.length > 0 && row.corpId ? this.corpList.find((原创 2021-12-17 12:10:12 · 2105 阅读 · 2 评论 -
el-table展开行---每次只展开一个
图一(修改前可以展开多个):图二(修改后每次只展开一个):具体代码:<template> <div class="wrap"> <el-table :data="tableData" style="width: 100%" border :row-key="getRowKeys" :expand-row-keys="expands" @expand-change="expandColumn"> &.原创 2021-12-13 10:15:33 · 4373 阅读 · 0 评论 -
el-table 手动选择展示列(二)
需求同el-table 手动选择展示列(一) 是一样的,只是换了一种写法:【为了避免 v-for 和 v-if 不同时使用,则使用了computed方法来更新表格字段的显示与隐藏】【 利用 <template slot-scope="scope"> 对表格数据进行 format 格式化显示 】原创 2021-11-24 18:08:56 · 910 阅读 · 0 评论 -
el-table 手动选择展示列(一)
table表格字段过多时,用户可以手动选择部分字段列进行展示。原创 2021-11-23 18:12:48 · 4887 阅读 · 1 评论 -
el-select 结合 el-checkBox 实现下拉全选+多选功能
实现效果如图所示:具体代码如下:<!-- * @Description: el-select 结合 el-checkBox 实现下拉全选+多选功能--><template> <div style="padding: 300px 100px;"> <el-select v-model="menus" multiple collapse-tags @change="changeSelectMenu" placeholder="原创 2021-11-23 17:07:58 · 2539 阅读 · 0 评论 -
el-table 点击单元格,改变所在行和列的背景色
1. 需求:el-table 点击单元格,改变所在行和列的背景色,加粗显示交叉点文字;2. 初始化表格,如下图:3.点击“湖南”单元格后,改变其所在行和列的背景颜色,加粗显示文字,如下图:4. 代码如下:<!-- * @Description: 点击单元格,改变当前所在行和列的样式--><template> <div class="wrap"> <el-table :data="tableData" bor..原创 2021-10-27 18:00:58 · 4989 阅读 · 1 评论 -
el-table 中间列表头合并显示
需求:由于表格中间列的数据含义相同,所以需要将中间所有列的表头进行合并展示;初始效果图:完整代码如下:<el-table :data="tableData" style="width: 100%;"> <el-table-column align="center" prop="name" label="姓名" width="200"></el-table-column> <el-table-column ...原创 2021-10-15 11:33:32 · 788 阅读 · 0 评论 -
el-time-picker组件选择时间范围时,不设置初始值无法选中
el-time-picker 组件选择时间范围的时候,不设置初始值无法选中问题<el-time-picker is-range v-model="value" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围" value-format="HH:mm:ss"></el-time-pic...原创 2021-09-29 18:19:39 · 2716 阅读 · 2 评论 -
el-input 类型为number时,输入中文后光标上移问题,并且去掉上下箭头
1. 设置 el-input 的 type='number'后,只能输入数字,输入中文后会自动清空,但是会出现一个问题:【光标会上移,如下图】解决方法:修改样式/** * 解决el-input设置类型为number时,中文输入法光标上移问题 **/.el-input__inner{ line-height: 1px !important;} 2. 设置 el-input 的 type='number'后,输入框后面会出现上下箭头:【如下图】解决办法:修改样式...原创 2021-09-28 17:04:28 · 3431 阅读 · 0 评论 -
el-cascader 级联选择器清空初始化
需求:级联选择器在清空了输入框之后,需要同时清空弹框里面的选中样式、高亮、以及回归初始化状态只展开一级菜单:【图1变 图2】解决办法:判断输入框为空值之后做以下操作恢复到初始化状态:this.$refs.myCascader.$refs.panel.checkedValue=[];//清空选中值this.$refs.myCascader.$refs.panel.clearCheckedNodes();/...原创 2021-09-28 15:30:26 · 6407 阅读 · 3 评论 -
el-select结合el-tree实现树形多选
业务需求:1. 在树形列表中选择项目;2. 树形列表需带有筛选过滤功能;3. 将已选择的项目展示在输入框中;4. 输入框中的选中项可以被单独快速删除;5. 下拉框中可再次对之前选择过的项目进行重新选择。实现思路:1. 所用技术:vue + elementUI组件库;2. 左侧:使用 el-select 下拉框多选;右侧:使用 el-popover 弹出框 里面包含了 el-tree 树形列表进行展示。最终效果:1. 初始页面展示如下:2....原创 2021-09-15 18:00:50 · 11523 阅读 · 17 评论 -
el-table 表格多行合并,以及序号处理
el-table 表格多行合并,以及序号处理原创 2021-09-02 17:03:43 · 5884 阅读 · 6 评论 -
elementUI中el-table表格的表头样式错位
版本:element-ui 2.12.0问题描述:使用elementUI的el-table表格组件时,表格高度定高,内容过多时右侧会出现滚动条,然后就会出现如下图所示的列错位的样式:解决办法:在网上也找了好多方法,试了好多改样式的方式,都没有什么用,没有达到效果,最后还是采用js的 doLayout 方法,在获取到数据后重绘表格,实现了想要的效果。代码很简单,如下:templete中给表格设置 ref 属性:<el-table :data="table" ref=原创 2021-08-20 16:31:31 · 994 阅读 · 0 评论