随笔分类 -  vue+element组件使用

Vue+element UI 线形进度条添加动画
摘要：<template> <div> <el-progress percentage="55" color="#1161E4" ></el-progress> </div> </template> <style lang="scss" scoped> /* 进度条动画 */ /deep/ .el-pro 阅读全文
posted @ 2024-07-03 11:26 Nymph_Zhu 阅读(172) 评论(0) 推荐(0)
Vue canvas绘制圆形进度条动画加载
摘要：父组件代码： <template> <!-- 创建 --> <div class="resource-warp-box"> <div class="center-box"> <div class="used-source"> <pageTitle title="已用资源" /> <div class 阅读全文
posted @ 2024-07-03 11:13 Nymph_Zhu 阅读(160) 评论(0) 推荐(0)
element ui 表格与锚点定位
摘要：父组件表格页面代码： <template> <div class="wrapper"> <div class="overview-box"> <div class="box-name"> <div class="flag" /> 标的事件 </div> <p class="con-txt"> {{ 阅读全文
posted @ 2023-12-22 10:46 Nymph_Zhu 阅读(369) 评论(0) 推荐(0)
vue+element 下拉框选择加搜索并且列表选项带图片
摘要：子组件代码： <template> <!-- 单选下拉框 --> <el-select v-model.trim="selectValue" filterable clearable :placeholder="placeText" :filter-method="filterMethod" :lo 阅读全文
posted @ 2023-03-22 11:59 Nymph_Zhu 阅读(1252) 评论(0) 推荐(0)
vue+element 表格动态列添加点击事件与排序（/或者空值排最后）
摘要：<template> <div> <el-table ref="tableData" :data="tableData" show-summary :max-height="520" :summary-method="summaryMethod" :default-sort="sortRule" @ 阅读全文
posted @ 2022-10-08 17:44 Nymph_Zhu 阅读(1472) 评论(0) 推荐(0)
Vue+element在form表单后加图标
摘要：<template> <el-form :ref="formName" :model="ruleForm" :rules="rules" label-width="140px" label-position="top" class="demo-ruleForm dialog-from-box" > 阅读全文
posted @ 2022-04-26 10:19 Nymph_Zhu 阅读(1044) 评论(0) 推荐(0)
vue+ DatePicker日期的加减
摘要：<template> <div style="margin:10px;"> <el-card> <el-date-picker v-model="boothDate" type="date" style="margin-bottom:20px;" placeholder="选择日期" value-f 阅读全文
posted @ 2021-12-14 10:36 Nymph_Zhu 阅读(1115) 评论(0) 推荐(1)
element+Pagination 分页
摘要：<template> <div style="margin:10px;"> <el-card> <el-table ref="multipleTable" :data="tableData" border style="width:100%;"> <el-table-column type="ind 阅读全文
posted @ 2021-12-08 09:56 Nymph_Zhu 阅读(52) 评论(0) 推荐(1)
element输入框只能输入数字或小数保留两位小数
摘要：<template> <div style="margin:10px;"> <!-- 修改弹框 --> <el-dialog title="价格修改" :visible.sync="dialogFormVisible" width="30%" :close-on-click-modal="false 阅读全文
posted @ 2021-12-07 09:31 Nymph_Zhu 阅读(1219) 评论(0) 推荐(1)
vue+el-dialog提交校验
摘要：<template> <div style="margin:10px;"> <el-card> <el-table ref="multipleTable" :data="tableData" border style="width:100%;"> <el-table-column type="ind 阅读全文
posted @ 2021-12-06 14:35 Nymph_Zhu 阅读(292) 评论(0) 推荐(1)
element+el-cascader省市区级联框使用
摘要：首先 npm install element-china-area-data 或者 cnpm install element-china-area-data 引入：import { provinceAndCityData, regionData, provinceAndCityDataPlus, r 阅读全文
posted @ 2021-11-24 16:07 Nymph_Zhu 阅读(675) 评论(0) 推荐(1)
Vue+element UI穿梭框使用
摘要：<template> <el-card style="margin: 10px"> <div class="detailBox"> <el-transfer v-model="value" :data="peopleNum" :button-texts="['到左边', '到右边']" @chang 阅读全文
posted @ 2021-10-20 09:40 Nymph_Zhu 阅读(645) 评论(0) 推荐(1)
element后台项目列表删除最后一项显示无数据
摘要：解决方法： delBlackPerson(row){ let params= { id:row.id } this.$confirm('确定删除该用户吗？', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warnin 阅读全文
posted @ 2021-08-18 11:57 Nymph_Zhu 阅读(117) 评论(0) 推荐(1)
vue+element 列表一列条件渲染
摘要：在template中列表渲染加上formatter方法 <el-table-column prop="rule_type" label="规则类型" align="center" :formatter="formatter"/> 在methods方法中写方法判断即可 formatter(row){ 阅读全文
posted @ 2021-08-17 15:25 Nymph_Zhu 阅读(344) 评论(0) 推荐(1)