- 博客(22)
- 收藏
- 关注
RSS订阅原创 el-select下拉选择图片，并且回显图片
第二种是自定义一个img来展示图片，定位到input框上，并去掉input的边框。第一种是通过ref给input框添加样式。但是这种方法在el-table中失效。在表格中的运用也是好的。
2023-06-13 14:20:54
1965
原创 el-table点击单元格出现input框可编辑
<el-table :data="data" border style="width: 100%" :cell-class-name="tableRowClassName" @cell-click="handleRowClick" > <el-table-column min-width="120px" align="center" ..
2022-05-25 15:00:01
1412
原创 vue中根据文件路径导出文件
返回的文件路径格式大概是：http://avwps.com//uploads/equipment/2022/05/20220506145125006.doc let url = row.reportFile;//返回的文件路径 const a = document.createElement("a"); a.href = url; a.download = "统计报告.doc"; // 下载后文件名 //不让它跳转在当前页面直接下载 a.st.
2022-05-12 16:37:40
1112
原创 前端实现分页切换
Tab栏展示时数据过多，进行分组切换第一种方法//定义数据//分组后的数据 groupedArray: [], //显示的数据 waterArray: [], // 每页显示的数量 pageSize: 3, // 共几页 pageNum: 1,//总数据waterList: [],// 默认当前显示第一页 currentPage: 0,//根据煤业显示的数量计算出页数 this.pageNum = Math.ceil(this.waterList.length /
2022-05-12 16:25:33
905
原创 递归处理树形结构层级样式
el-table的树形数据处理默认为动态获取的第一个数据，所以下拉三角和层级结构的样式在后端返回的排序上，但是需求要数据项名称进行层级样式效果：利用cell-style，改变单元格样式<el-table :data="tableData" style="width: 100%" ref="crud" border @selection-change="handleCurrentChange" @ro
2022-03-28 12:00:47
427
原创 css实现时间轴样式年份选择器
效果图<div class="right"> <span class="label">评价周期</span> <ul class="year-list"> <li v-for="(year, index) in years" :key="index"> <label :class="{ active: currentYear === year }"
2022-02-22 15:46:55
696
原创 el-table合并指定列相同内容的单元格
element ui官方文档给到的介绍 // 获取合并行 getSpanArr(data) { this.spanArr = []; //第一列合并 let pos1 = 0; for (let i = 0; i < data.length; i++) { if (i === 0) { // 如果是第一条记录（即索引是0的时候），向数组中加入１ this.spanArr.push(1); //第一列
2021-12-21 09:19:57
486
原创 vue点击选中，再次点击取消
举个栗子：在el-calendar中单击选中，再次点击取消选中可以定义一个变量，用他的值作为判断，如果与点击日期相等，就是取消选中// 点击查询当天记录 handleHoliday(date, data) { const { day } = data; if (this.clickTime === day) { //定义变量clickTime this.findWorkList(this.currentDate); this.fi
2021-12-03 16:28:29
1598
原创 el-table动态生成列
需求：在统计的表格中展示不同事项和数据，因为事项的名称和数量都不确定，所以需要动态渲染表头和列效果：这是后端返回的数据格式，leave是动态的，key的内容就是表头,使用Object.keys()返回一个数组,数组中就是key值列表，再v-for循环渲染 getRecord(params).then(res => { this.recordList = res.data.data || []; //获取到整个统计列表，用for of将每一条的leave 中的k
2021-11-15 10:26:18
7246
1
原创 el-table表尾合计行,自定义计算方式
需求:末尾最后一行显示总计人数,其中最后一列是出勤率,需要自定义计算方式: 出勤人数/实到人数*100在el-table加上show-summary,表示显示末尾计算自定义合计逻辑在el-table加:summary-method=“getSummaries”最后在methods;里面定义getSummaries方法<el-table ref="crud" class="check-all-hide" :d
2021-11-01 10:07:35
3606
3
原创 el-calendar根据不同事项渲染不同背景颜色
效果图代码如下<el-calendar class="calendar" v-model="value" ref="elCalendar"> <template slot="dateCell" slot-scope="{date, data}"> <div :class="{ 'item':true, 'is-selected':dateKeys.ind
2021-10-26 14:46:03
2053
原创 百度.js添加圆形覆盖物并跟随中心点移动
// 修改经纬度 changeCenter(zooms) { this.map.centerAndZoom( new BMap.Point(this.addForm.longitude, this.addForm.latitude), zooms || this.map.getZoom() ); }, // 获取并设置地图中心点 getMapCenter() { var pos = this.map.get.
2021-10-26 14:10:00
450
原创 el-time-picker在选择开始时间后在结束时间选择器禁用开始时间之前的时间
通过selectableRange限制可选时间范围用模板字符串将开始时间拼接到时间选择范围这里因为进行了时间格式化,将秒数拼接在后面 <el-time-picker v-model="addForm.startTime" :picker-options="{ selectableRange: '00:00:00- 23:59:59' }" format=".
2021-10-21 10:40:55
1165
1
原创 el-date-picker开始日期不能大于结束日期
<el-col :span="12"> <el-form-item label="启用日期:"> <div class="dateBox disableClass"> <el-date-picker v-model="addForm.actionStartTime" .
2021-10-21 10:07:50
1937
原创 el-time-picker时间格式化
<el-time-picker v-model="addForm.startTime" :picker-options="{ selectableRange: '00:00:00- 23:59:59' //时间选择器,控制可选择的时间范围 }" format="HH:mm" //使用format指定输入框的格式 value-format="HH:mm" //使用value-form
2021-10-21 09:56:22
1727
原创 el-radio动态获取数据， 默认选中第一个
<el-radio-group v-model="attenceId" > <el-radio v-for="item in factoryList" :label="item.attenceId" :key="item.attenceId" >{{item.attenceName}
2021-10-15 16:52:19
7822
原创 el-table表格根据不同内容渲染不同背景颜色
根据不同的状态,为了方便区分,给单元格渲染出不同的背景颜色效果图:因为后台返回数据的原因,暂时只能看到这样的效果3.代码:cell-class-name=“cellClassName”//在表格中加入这一行代码，为 Table 中的单元格添加 class，表明该行处于某种状态<el-table ref="crud" class="check-all-hide" :data="recordList" bor.
2021-10-15 10:50:54
2175
3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人