搜索到
13
篇与
的结果
-
ElementUI中一个页面多个el-descriptions列不对齐问题处理 使用ElementUI框架时，如果我们希望列表形式展示多个字段。可能经常使用Descriptions描述列表，如果一个页面只有一个Descriptions时，列宽显示是没有问题的，但是如果有多个Descriptions，你会发现，各个Descriptions之间的列宽，可能显示的不一致。为了保持各列宽度一致，我们可以设置contentStyle属性。<el-descriptions border :label-style="{ width: '110px' }" :contentStyle="content_style"> </el-descriptions> 然后在data里面，设置具体的content_stylecontent_style: { // 居左 'text-align': 'left', // 设置长度 width: '400px', // 排列第二行 'word-break': 'break-all' } -
ElementUI中el-input-number实时监听值变化 在前端开发过程中，我们经常会遇到将金额转大写的情况，我们要实现的效果，是只要输入就实时计算大写，而不是等全部输入完成失去焦点后。如果使用ElementUI框架的el-input-number控件的@input事件，是无法达到实时显示效果的。html代码<el-col :span="24"> <el-form-item label="本次报价" prop="quotationPrice"> <el-input-number :precision="2" :step="100" :max="10000000" :min="0" v-model="form.quotationPrice" style="width: 100%" controls-position="right" data-unit="元" placeholder="请输入本次报价" ref="refQuotationPrice" @input.native="convertPrice2CnyMoney" @change="convertPrice2CnyMoney4Change" /> </el-form-item> </el-col> <el-col :span="24"> <el-form-item label="总金额" prop="cnyMoney"> <div class="cnyMoney">{{ cnyMoney }}</div> </el-form-item> </el-col> JavaScript代码//本次报价金额实时转大写 convertPrice2CnyMoney(event) { let value = this.$refs.refQuotationPrice.displayValue; this.cnyMoney = numToCny(value); }, //本次报价金额实时转大写 convertPrice2CnyMoney4Change(val) { this.cnyMoney = numToCny(val); }
-
el-table隐藏顶部复选框 有时候我们使用el-table的选择框时，如果涉及修改、删除时，可能一次只允许用户选择一条，这样的话，如果使用顶部的全选复选框就不合适了。我们可以提供两种方式，一种是隐藏顶部的复选框，另一种是将顶部复选框改成文字，禁止点击。多选框那一列加label-class-name <el-table v-loading="loading" :data="assetClass.assetClassPropertyList" row-key="propertyId" :row-class-name="rowClassName" @selection-change="handleSelectionChange" ref="table"> <el-table-column type="index" width="50" align="center" label="序号"/> <el-table-column type="selection" width="50" align="center" label-class-name="DisabledSelection"/> <el-table-column prop="propertyName" label="属性名称" show-overflow-tooltip align="center"> <template slot-scope="scope"> <el-input v-model="scope.row.propertyName" size="mini" maxlength="64" :show-word-limit="true"></el-input> </template> </el-table-column> <el-table-column prop="isRequired" label="是否必填" :formatter="isRequiredFormatter" width="100"> <template slot-scope="scope"> <el-switch v-model="scope.row.isRequired" active-value="Y" inactive-value="N" ></el-switch> </template> </el-table-column> </el-table>style加样式隐藏顶部复选框<style scoped> /*表格全选框去除空框*/ .el-table >>> .DisabledSelection .cell .el-checkbox__inner { display: none; position: relative; } </style>将顶部复选框改成汉字<style scoped> /*表格全选框去除空框*/ .el-table >>> .DisabledSelection .cell .el-checkbox__inner { display: none; position: relative; } /*表格全选框改为：选择*/ .el-table >>> .DisabledSelection .cell:before { content: "选择"; position: absolute; left: 7px; } </style>
-
elementui textarea与input字体不一致问题解决 今天使用elementui中input及textarea时，发现两种控件默认显示的字体是不一致的，input的比较扁，而textarea显示的比较瘦高。可以看下下面这张图，比较明显。原因通过F12，我们可以看到textarea的字体为monospaceinput的字体为Arial解决在全局css文件加入以下代码即可， 因为我们项目使用的是ruoyi的系统，所以在sec/assets/styles/element-ui.scss文件中加入以下代码即可textarea { //font-family: Arial, Helvetica, sans-serif; //解决TextArea与input不一致的问题 font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif; }
-
修改elementUI中el-table树形结构图标 elementUI中的表格，可以显示成树形的结构，默认的样式，跟el-tree的样式一样，el-table如果是树形结构的话，如果树形有下级的话，显示的是一个小三角号，如果没有下级的话，是没有图标的。感觉这种图标不是特别好看，为了美化，我们可以替换成自己的图标。如果我们想改变树形的图标，可以在vue的style中加入以下样式<style scoped> .el-tree /deep/ .el-tree-node__expand-icon.expanded { -webkit-transform: rotate(0deg); transform: rotate(0deg); } /*有子节点 且未展开*/ .el-table /deep/ .el-table__expand-icon .el-icon-arrow-right:before { background: url('../../../../assets/images/文件夹未展开.png') no-repeat; content: ''; display: block; width: 16px; height: 16px; font-size: 16px; background-size: 16px; } /*有子节点 且已展开*/ .el-table /deep/ .el-table__expand-icon--expanded{ -webkit-transform: rotate(0); transform: rotate(0); } .el-table /deep/ .el-table__expand-icon--expanded .el-icon-arrow-right:before { background: url('../../../../assets/images/文件夹展开.png') no-repeat; content: ''; display: block; width: 16px; height: 16px; font-size: 16px; background-size: 16px; } /*没有子节点*/ .el-table /deep/ .el-table__placeholder::before { background: url('../../../../assets/images/文件.png') no-repeat; content: ''; display: block; width: 16px; height: 16px; font-size: 16px; background-size: 16px; } </style>
-
Vue+element-ui导出el-table中的数据 1.先安装依赖npm install --save xlsx file-saver2.在要导出的vue组件中的script引入import FileSaver from "file-saver" import XLSX from "xlsx"3.导出方法exportExcel() {//执行此方法导出Excel表格 // 为el-table添加一个id：out-table // 当el-table使用了fixed时会导出两次数据，所以要先进行判断 var fix = document.querySelector('.el-table__fixed'); var wb; if (fix) { // 如果有fixed，先移除，然后再添加上 wb = XLSX.utils.table_to_book(document.querySelector("#out-table").removeChild(fix)) document.querySelector("#out-table").appendChild(fix) }else{ wb = XLSX.utils.table_to_book(document.querySelector("#out-table")) } var wbout = XLSX.write(wb, { bookType: "xlsx", bookSST: true, type: "array" }); try { FileSaver.saveAs( new Blob([wbout], { type: "application/octet-stream" }), // 导出的文件名称 "Data.xlsx" ) } catch (e) { if (typeof console !== "undefined") console.log(e, wbout); } return wbout; },这个方法也存在问题，比如样式不够灵活等。
-
el-datepicker设置可选日期范围 1.只能选择当前及以后的日期<el-date-picker v-model="value1" type="date" :picker-options="pickerOptions"> </el-date-picker> data() { return { pickerOptions: { disabledDate(time) { return time.getTime() < Date.now() - 8.64e7; } }, }2.只能选择今天以及今天以前的日期data (){ return { pickerOptions: { disabledDate(time) { return time.getTime() > Date.now() - 8.64e6 } }, } }3.只能选择今天之后的日期data (){ return { pickerOptions: { disabledDate(time) { return time.getTime() < Date.now(); } }, } }4.只能选择今天之前的日期data (){ return { pickerOptions0: { disabledDate(time) { return time.getTime() > Date.now(); } }, } }5.设置选择三个月之前到今天的日期data (){ return { pickerOptions0: { disabledDate(time) { let curDate = (new Date()).getTime(); let three = 90 * 24 * 3600 * 1000; let threeMonths = curDate - three; return time.getTime() > Date.now() || time.getTime() < threeMonths;; } }, } }组件代码<el-date-picker v-model="value1" type="date" placeholder="开始日期" :picker-options="pickerOptions0"> </el-date-picker> <el-date-picker v-model="value2" type="date" placeholder="结束日期" :picker-options="pickerOptions1"> </el-date-picker>
-
-
ElementUI中的el-table中实现动态添加一行、删除一行、清空所有行 实现首先页面添加一个el-table,然后绑定其数据源为bcglXiangXiList，并且通过<el-table-column type="selection" width="30" align="center" />添加了勾选框。然后通过@selection-change="handleDetailSelectionChange设置其勾选框改变事件。这里的数据源bcglXiangXiList要提前声明 data() { return { //详细list bcglXiangXiList: [],这里的每一列是不同的控件，但是最终都要有v-mode进行动态数据绑定。 <el-table v-loading="loading" :data="bcglXiangXiList" :row-class-name="rowClassName" @selection-change="handleDetailSelectionChange" ref="tb" > <el-table-column type="selection" width="30" align="center" /> <el-table-column label="序号" align="center" prop="xh" width="50"></el-table-column> <el-table-column label="开始时间/最早时间-结束时间/最晚时间" width="250" prop="sjfw"> <template slot-scope="scope"> <el-time-picker is-range format="HH:mm" value-format="HH:mm" :style="{width: '100%'}" start-placeholder="开始时间" end-placeholder="结束时间" range-separator="至" clearable @change="changesjfw(scope.row)" v-model="bcglXiangXiList[scope.row.xh-1].sjfw" ></el-time-picker> </template> </el-table-column> <el-table-column label="指定天数" align="center" prop="ts" width="150"> <template slot-scope="scope"> <el-select clearable @change="changezdts(scope.row)" v-model="bcglXiangXiList[scope.row.xh-1].ts" > <el-option v-for="dict in zdtsOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" /> </el-select> </template> </el-table-column> <el-table-column label="打卡地点" align="center" prop="dkdd" width="150"> <template slot-scope="scope"> <el-select clearable @change="changedkdd(scope.row)" v-model="bcglXiangXiList[scope.row.xh-1].dkdd" > <el-option v-for="dict in dkddOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" /> </el-select> </template> </el-table-column> <el-table-column label="最小井下累计时间-最大井下累计时间" width="250" prop="jxsjfw"> <template slot-scope="scope"> <el-time-picker is-range format="HH:mm" value-format="HH:mm" :style="{width: '100%'}" start-placeholder="开始时间" end-placeholder="结束时间" range-separator="至" clearable @change="changejxsjfw(scope.row)" v-model="bcglXiangXiList[scope.row.xh-1].jxsjfw" ></el-time-picker> </template> </el-table-column> </el-table>这里的数据源是个数组，所以绑定的每一行都是一个对象，怎样将每行与数据库源对应起来？首先怎样实现第一列的序号字段。这里通过设置el-table的:row-class-name="rowClassName"来实现，其中rowClassName是回调函数。所以需要在函数中实现rowClassName rowClassName({ row, rowIndex }) { row.xh = rowIndex + 1; },其中row是行对象，rowindex是行号，从0开始。所以这样就能实现了序号(xh属性)递增并且取值为行号加1。然后怎样实现勾选框单选？通过设置el-table的@selection-change="handleDetailSelectionChange"来实现对应的实现方法handleDetailSelectionChange中 //单选框选中数据 handleDetailSelectionChange(selection) { if (selection.length > 1) { this.$refs.tb.clearSelection(); this.$refs.tb.toggleRowSelection(selection.pop()); } else { this.checkedDetail = selection; } },这里的section本来是多选时选中项的数组，这里通过 this.$refs.tb获取到这个el-table，但是要提前给这个el-table设置ref="tb"然后判断所选的数组的长度大于1就清空并选中当前行，否则就将当前选中的赋值给checkedDetail,所以需要提前声明checkedDetail//选中的从表数据 checkedDetail: [],这样在上面对这个el-table绑定了数据源之后就可以通过类似v-model="bcglXiangXiList[scope.row.xh-1].ts"这种来进行动态数据绑定。实现新增一行新增按钮<el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddDetails">添加</el-button>在新增按钮对应的点击事件中 handleAddDetails() { if (this.bcglXiangXiList == undefined) { this.bcglXiangXiList = new Array(); } let obj = {}; obj.ts = "1"; obj.dkdd = "1"; obj.sjfw = ["07:00","07:30"]; obj.jxsjfw = ["06:00","12:00"]; this.bcglXiangXiList.push(obj); },前面先对数据源进行判断是不是undefined，因为在清空时会将其设置为undefined，所以需要重新新建。然后构建一个对象并赋值。将此对象添加进数据源bcglXiangXiList即可。实现删除一行前面已经对其勾选事件进行了重写，在勾选后将勾选的内容存储到了checkedDetail所以在删除前判断是否选中了一行就可以通过判断其长度即可。删除一行按钮<el-button type="success" icon="el-icon-delete" size="mini" @click="handleDeleteDetails" >删除</el-button>然后在删除按钮对应的事件中handleDeleteDetails() { if (this.checkedDetail.length == 0) { this.$alert("请先选择要删除的数据", "提示", { confirmButtonText: "确定", }); } else { this.bcglXiangXiList.splice(this.checkedDetail[0].xh - 1, 1); } },这里首先判断是否已经选择了一行，如果选择了一行之后,就可以通过存储的选中项的this.checkedDetail[0].xh -1获取当前行的index，而这个index正好与数据源中的index是想对应的。然后将此条数据在数据源中去掉即可实现删除一行。其中splice方法是表示从第一个索引参数开始，删除第二个参数个元素。清空所有行清空按钮< el - button type = "danger" icon = "el-icon-delete" size = "mini" @click = "handleDeleteAllDetails" > 清空 < /el-button>清空按钮对应的事件中handleDeleteAllDetails() { this.bcglXiangXiList = undefined; },将数据源设置为undefined即可。
-
el-upload实现图片上传、回显及修改 场景先说一下适用场景吧。单据只能上传一张图片，图片上传完成后，在当前界面显示，并隐藏掉上传按钮。再次打开单据时，可以查看已经上传的图片，同时可以对已经上传的图片进行修改，修改的上传也是只能上传一张图片。前端代码<template> <!-- 添加或修改医疗机构登记对话框 --> <el-dialog :title="title" :visible.sync="open" width="60%" height="60%" :close-on-click-modal="false" :close-on-press-escape="false" show-close append-to-body> <el-form ref="form" :model="form" :rules="rules" label-width="80px"> <el-row> <el-col :span="12" v-if="form.vehicleNumber !== 0"> <el-form-item label="车辆编号" prop="vehicleNumber"> <el-input v-model="form.vehicleNumber" placeholder="请输入车辆编号" maxlength="32" show-word-limit/> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="车辆型号" prop="vehicleModel"> <el-input v-model="form.vehicleModel" placeholder="请输入医疗机构车辆型号" maxlength="128" show-word-limit/> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="车牌" prop="licence"> <el-input v-model="form.licence" placeholder="请输入车牌" maxlength="10" @blur="licenceUpper" show-word-limit/> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="购置日期" prop="acquisitionDate"> <el-date-picker format="yyyy-MM-dd" style="width:100%" value-format="yyyy-MM-dd" clearable v-model="form.acquisitionDate" placeholder="请选择购置日期" show-word-limit></el-date-picker> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="驾驶员" prop="driver"> <el-input v-model="form.driver" placeholder="请输入驾驶员" maxlength="32" show-word-limit/> </el-form-item> </el-col> <el-col :span="24"> <el-form-item label="备注" prop="remark"> <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" maxlength="512" show-word-limit/> </el-form-item> </el-col> <el-col :span="24"> <el-form-item label="车辆图片"> <el-upload action="#" list-type="picture-card" ref="upload" :auto-upload="true" :multiple="false" accept="image/png, image/jpeg" :before-upload="onBeforeUpload" :http-request="uploadFile" :on-success="onSuccess" :on-change="onChange" :class="{hide:hideUpload}" :file-list="fileList"> <i slot="default" class="el-icon-plus" v-if="!disabled"></i> <div slot="file" slot-scope="{file}"> <img class="el-upload-list__item-thumbnail" :src="file.url" alt=""> <span class="el-upload-list__item-actions"> <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)"> <i class="el-icon-zoom-in"></i> </span> <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)"> <i class="el-icon-download"></i> </span> <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)"> <i class="el-icon-delete"></i> </span> </span> </div> </el-upload> </el-form-item> </el-col> </el-row> </el-form> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="submitForm">确 定</el-button> <el-button @click="cancel">取 消</el-button> </div> <el-dialog :visible.sync="dialogVisible"> <img width="100%" :src="dialogImageUrl" alt=""> </el-dialog> </el-dialog> </template> <script> import { addVehicle, updateVehicle, getVehicle } from '@/api/servicePlatform/basicData/vehicle' import { fileUpload } from '@/api/public/attachment' export default { name: 'detail', props: ['open', 'title', 'selectedVehicle'], data: function() { return { // 表单参数 form: {}, // 表单校验 rules: { vehicleNumber: [ { required: true, message: '请输入车辆编号', trigger: 'blur' } ], vehicleModel: [ { required: true, message: '请输入医疗机构车辆型号', trigger: 'blur' } ], licence: [ { required: true, message: '请输入车牌', trigger: 'blur' } ], acquisitionDate: [ { required: true, message: '请选择购置日期', trigger: 'blur' } ], driver: [ { required: true, message: '请输入驾驶员', trigger: 'blur' } ] }, dialogImageUrl: '', dialogVisible: false, disabled: false, fileList: [], hideUpload: false, limitCount: 1, selectedCount: 0 } }, methods: { /** 提交按钮 */ submitForm: function() { this.$refs['form'].validate(valid => { if (valid) { if (this.form.vehicleId != undefined) { updateVehicle(this.form).then(response => { this.msgSuccess('修改成功') this.$emit('getList') }) } else { addVehicle(this.form).then(response => { this.msgSuccess('新增成功') this.$emit('getList') }) } } }) }, //取消 cancel: function() { this.$emit('cancel') }, licenceUpper: function(val) { if (this.form.licence !== undefined) { this.form.licence = this.form.licence.toUpperCase() } }, //删除 handleRemove(file) { this.selectedCount-- this.hideUpload = file.length >= this.limitCount this.$refs.upload.clearFiles() }, //预览 handlePictureCardPreview(file) { this.dialogImageUrl = file.url this.dialogVisible = true }, //下载 handleDownload(file) { const a = document.createElement('a') const event = new MouseEvent('click') a.download = file.name a.href = file.url a.dispatchEvent(event) console.log(file) }, //上传前校验 onBeforeUpload(file) { const isIMAGE = file.type === 'image/jpeg' || 'image/gif' || 'image/png' const isLt1M = file.size / 1024 / 1024 < 1 if (!isIMAGE) { this.$message.error('上传文件只能是图片格式!') } if (!isLt1M) { this.$message.error('上传文件大小不能超过 1MB!') } return isIMAGE && isLt1M }, onChange: function(file) { debugger this.fileList = [] this.fileList.push(file) this.selectedCount++ this.hideUpload = this.selectedCount >= this.limitCount }, handleUpload: function() { this.$refs.upload.submit() }, //上传附件 uploadFile(param) { fileUpload(param).then(res => { debugger if (res.code === 200) { this.form.photo = res.attachmentId } else { this.$message({ showClose: true, message: res.msg, type: 'error' }) } }).catch((error) => { this.$message({ showClose: true, message: error, type: 'error' }) }) }, beforeUpload(file) { }, //上传成功 onSuccess: function(response, file, fileList) { } }, created() { if (this.selectedVehicle !== undefined && this.selectedVehicle !== null && this.selectedVehicle.vehicleId !== undefined) { getVehicle(this.selectedVehicle.vehicleId).then(response => { this.form = response.data this.dialogImageUrl = response.data.url let obj = new Object() obj.url = response.data.url this.fileList.push(obj) }) } } } </script> <style> .hide .el-upload--picture-card { display: none; } </style>
-
element ui之el-select选择控件使用一些说明的 这会是一片持续更新的博文，主要记载使用elementui的日期控件el-date-picker的一些问题或者奇技淫巧。对选禁止换行el-select支持多选操作，但是在使用过程中，如果用户选择的元素比较多，会导致el-select的内容换行显示，影响美观。针对这个问题，我们有两种解决方案，但是都各有缺点。1.通过覆盖样式解决通过样式覆盖的方式解决，是相对来说比较好的一种方式。通过覆盖elementui的样式，禁止换行。在style中，增加如下css（不能在scoped中添加，在scoped中写不会生效）.el-select__tags { flex-wrap: nowrap; overflow: hidden; }这种方式的缺点是多余的内容不会显示。2.通过collapse-tags属性合并内容collapse-tag是el-select自带的一个属性。当选择多个元素时，只显示第一个元素，后面的元素显示1⃣️2⃣️3⃣️...这种格式。这种方式虽然解决了换行的问题，但是只能显示第一个元素，显示效果不如第一种方式。
-
element ui之el-date-picker日期控件使用一些说明 这会是一片持续更新的博文，主要记载使用elementui的日期控件el-date-picker的一些问题或者奇技淫巧。实际日期比选择日期早一天的问题这个是由于element-ui中时间控件的默认时间为国际标准时间，因此与北京时间差8个小时。解决方法也很简单，增加value-format="yyyy-MM-dd"即可。比如：<el-date-picker v-model="destoryApplyResultVO.applyTime" style="width: 100%" type="date" placeholder="选择申请日期" value-format="yyyy-MM-dd"> </el-date-picker>日期校验实际业务开发中，我们可能会涉及开始日期、结束日期这种数据，一般情况下，开始日期是不能晚于结束日期的，对于这种日期类型的校验，我们可以通过rules实现。<script> export default { name: 'detail', data() { const checkDate = (rule, value, callback) => { if (new Date(this.destoryApplyResultVO.applyTime) > new Date(this.destoryApplyResultVO.checkTime)) { callback(new Error('申请日期不能晚于核对日期')) } else { callback() } } return { rules: { applyTime: [ { required: true, message: '请选择申请日期', trigger: ['blur', 'change'] }, { validator: checkDate, trigger: ['blur', 'change'] } ] }, } }, methods: { //确定 handleSave: function() { this.$refs['destoryApplyResultVO'].validate((valid) => { if (valid) { //业务代码 } }) } } } </script>
