![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
ElementUI
黑魔仙小拓
这个作者很懒,什么都没留下…
展开
-
element日期时间选择器限制在当前日期和时间及以后
【代码】element日期时间选择器限制在当前日期和时间及以后。原创 2023-03-03 15:03:28 · 687 阅读 · 0 评论 -
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 · 1388 阅读 · 0 评论 -
递归处理树形结构层级样式
el-table的树形数据处理默认为动态获取的第一个数据,所以下拉三角和层级结构的样式在后端返回的排序上,但是需求要数据项名称进行层级样式效果:利用cell-style,改变单元格样式<el-table :data="tableData" style="width: 100%" ref="crud" border @selection-change="handleCurrentChange" @ro原创 2022-03-28 12:00:47 · 420 阅读 · 0 评论 -
el-table合并指定列相同内容的单元格
element ui官方文档给到的介绍 // 获取合并行 getSpanArr(data) { this.spanArr = []; //第一列合并 let pos1 = 0; for (let i = 0; i < data.length; i++) { if (i === 0) { // 如果是第一条记录(即索引是0的时候),向数组中加入1 this.spanArr.push(1); //第一列原创 2021-12-21 09:19:57 · 482 阅读 · 0 评论 -
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 · 1585 阅读 · 0 评论 -
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 · 7230 阅读 · 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 · 3580 阅读 · 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 · 2009 阅读 · 0 评论 -
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 · 1147 阅读 · 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 · 1929 阅读 · 0 评论 -
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 · 1710 阅读 · 0 评论 -
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 · 7779 阅读 · 0 评论 -
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 · 2159 阅读 · 3 评论