anny_mei的博客

【代码】el-table树状表格,默认展开第一个节点的每一层。

根据情况设定是否为编辑模式,如果为编辑模式就需要进行筛选删除及接口,如果不是编辑模式,只需要进行筛选删除。有时候在弹窗中的弹窗要删除数据,有的是刚新增进来的,没有经过保存就没有id,有的已经保存过就有id。

el-table,列表合并,根据名称列名称相同的品名讲其它列值相同的进行合并,并且不能垮品名合并。用到el-table合并行的方法合并。然后在初始值的时候调取方法。

然后用合并的方法,此处就需要递归去计算,根据props去匹配每一列的数据,然后加起来,关键代码。首先,由于我的表头是动态的,所以就稍微复杂一点。表格的数据格式是这样的。表头数据格式是这样的。

el-input单独校验,效果图如下。data中定义校验规则。methods中使用。

因为合计el-table的合并方法是不生效的,所以需要修改css下手。

一定要做的操作就是清空一下选中的数据,否则不生效,this.$refs.selectTable.clearSelection();最后在保存之前把勾选中的数组和新数组 this.selectedRowsAll拼接一下。需求为翻页记住上页选项,包含回显选中的数据,然后还能进行新增和取消勾选。然后就是处理选中的数据,和原数组进行对比,进行回显和取消的操作。首先element管网有提供及住翻页功能。所以可以根据官网提供的方法来改造。

动态合并多级表头

el-table前端分页,翻页排序累计

ul-load导入

el-table合并

el-date-picker开始时间不得大于结束时间精确到时分秒

el-table动态合并表格

element 提供了方法 :editable=“false” 只能禁止外层的输入,但是里层的(白色的部分还是不行)这里的话,左侧的日期我是用css使其禁止输入.el-date-picker__time-header { .el-date-picker__editor-wrap:nth-child(1) .el-input:nth-child(1) { z-index: -1; } }右侧的时间,因为我们的需求是只能选择小时不能选择分秒,所以就用监听完成watch

我们是开始时间选择先选的话,结束时间就只能选择当前天和后一天,如图如果先选择结束时间,那么开始时间就只能选择当天和前一天,如图代码 <el-date-picker v-model="startTime" type="datetime" placeholder="开始日期" value-format="yyyy-MM-dd HH:hh:ss" :picker-options="pickerOpt

效果图因为24 小时是固定的,然后接口的数据也是按照08点-07点顺序严格固定的所以表头是我写死的,数据由接口拿表头如下 timeList: [ { value: 0, label: "08:00" }, { value: 1, label: "09:00" }, { value: 2, label: "10:00" }, { value: 3, label: "11:00" }, { value: 4, label:

首先el-tree-transfer的地址 github文档：https://github.com/hql7/tree-transfer效果图安装及使用npm install el-tree-transfer --save //或者 npm i el-tree-transfer -S然后在局部引入并注册组件就可以使用了import treeTransfer from “el-tree-transfer”; // 引入 <!-- 使用树形穿梭框组件 -->

效果如下,(隐藏了两侧的加减按钮) <el-input-number v-model="form.totalLoss" placeholder="请输入事故总损失" size="medium" :min="0" // 最小值 :controls="false" // 隐藏减价按钮

效果如下封装代码<template> <div> <el-table style="width: 100%" class="table" ref="table" :data="data" stripe :header-cell-style="options.headerCellStyle || {}" :cell-style="options.cellStyle || {}"

效果图我们的数据格式因为我们的字段和官网提供的字段完全不同,所以需要转换上代码 <el-cascader ref="lazytree" :show-all-levels="false" :options="treeData" :props="defaultProps" :key="isResouceShow" @chan

//自定义校验规则 var checkIdCard = (rule, value, cb) => { const regIdCard = /^[0-9A-Za-z]+$/; if (regIdCard.test(value)) { return cb(); } cb(new Error('只能输入数字或字母')); }; datacode: [ { required: true, ...

mounted() { // 点击级联选择器的label文字 就可以选择该选项 setInterval(function() { document.querySelectorAll('.el-cascader-node__label').forEach((el) => { el.onclick = function() { if (this.previousElementSibling) this.previousElementSib..

handleNodeClick (data, e) { console.log(data, '点击了节点') if (e.parent.data.label !== undefined) { this.dialogView = true } },

<template> <div class="userInfo-edit"> <div class="add-tab">资料编辑</div> <el-form ref="form" :model="form" :rules="rules" size="medium" label-width="100px" > <el-form-item la.

我的需求是四个卡片,循环出来的,但是图标不一样,所以要循环图标样式来达到更换的目的<template> <app-row> <app-col v-for="item in list" :key="item.name" class="col-card-box"> <el-card class="pie-card"> <app-row class="flex-column" no-gutters>

文档方法通过type="selection"设置复选框列，重点在于 reserve-selection 属性，设置为true时，数据更新之后保留之前选中的数据。重点在于需要表格属性“row-key”的配合，在使用 reserve-selection 功能的情况下，该属性是必填的。将row-key设置为表格中唯一的字段名称。这样就实现了后端分页在翻页或切换条数时，记住之前的复选框选项。示例:<el-table :data="tableData" row-key="id" ref=

本菜鸡真的是遇到的时候蒙了,后端说,给我一个接口,然后拿到父级id的时候再调接口把id穿进去再查子级,我当时是懵的,这咋玩…然后,同事说可以用懒加载,恍然大悟…效果如下代码如下, <el-form-item label="评价项" prop="name"> <el-cascader v-model="creditAddForm.name" :props="cascaderProps"

由于我项目的原因,企业和个人个表单不一样,通过给isView的true和false来控制首先企业默认的是true,所以可以在created里面判断 created() { if (this.isView) { // 个人表单校验失效 this.rules.personName[0].required = false } },然后再在methods方法里面点击了个人表单按钮时再判断 handelPerson() { this.isView =

效果图后台返回的是数据时这样子的一个数组里面含对象,对象下海还有子对象拿取数据的方法为了防止父ID和子ID重复,可以自己加个字符串区别一下

我的项目需求是在失去焦点的时候触发函数调用接口查询手机号是否重复

效果如下举个栗子，我想要编辑和删除按钮颜色是16进制的，代码如下<template> <el-button class="type-button" type="text" :icon="iconfont" :class="[classes, type == '编辑' ? 'orange' : '', type == '删除' ? 'gray' : '']" v-bind="$attrs" v-on="$listeners" &g

首先封装一个过滤器import Vue from "vue"import moment from "moment"import "moment-precise-range-plugin"moment.prototype.preciseDiff = function(d2, returnValueObject) { let result = moment.preciseDiff(this, d2, returnValueObject) if (!returnValueObject) {

当点击新增工作经历时,动态新增表单,并且可以点击删除当当前表单新增的数据要以对象的形式push到数组里面去,我这里没有写校验规则会简单一些<el-tab-pane label="工作经历" name="four"> <template> <div> <el-form ...

效果图但是我这个项目情况有点特殊,后台给我返回的是不带毫秒的时间戳,所以我得转换时间,而且没有对应的接口,如果数据接口是可以为这个日历服务的,比如日期格式是:xxx-xx-xx的模式,那就可以直接使用其它方法.我自己的就记录一下首先在在循环里面调用一个方法 <el-calendar v-model="currentDate"> <templa...