目录：
1 常用表头搜索：input+select+daterange
2 表格中对【上下架】、【排序】、【选择】进行编辑
3 使用vue-clipboard2实现复制链接的功能
4 使用vue-qUIll-editor实现富文本编辑
5 解决el-input类型为 tyPE=’number’ 不显示上下箭头
6 解决当el-select选中值绑定为对象时处理
7 使用upload照片墙多图上传-自定义方式显示(方便回显编辑)
8 vue+element-ui+form 实现动态生成表单
9 vue+element-ui+table 实现动态表头+可编辑表格
10 table表格组件自定义索引,多页数据从1开始排序
11 饿了么自定义滚动条el-scrollbar组件
1.常用表头搜索：input+select+daterange
|
1 |
<template><el-card style="margin:10px;"><el-form :inline="true" :model="dataForm" label-width="100px"><el-form-item label="标题:"><el-input v-model="dataForm.title" placeholder="请输入资讯标题关键字" clearable=""></el-input></el-form-item><el-form-item label="是否上架:"><el-select v-model="dataForm.status" placeholder="请选择上架状态" clearable=""><el-option label="已上架" value="1"></el-option><el-option label="未上架" value="2"></el-option></el-select></el-form-item><el-form-item label="添加日期:"><el-date-picker v-model="dataForm.time" value-format="yyyy-MM-dd" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker></el-form-item><el-form-item style="float:right;"><el-button type="primary">搜索</el-button><el-button>重置</el-button></el-form-item></el-form></el-card></template> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
export default { name: 'newsList', data() { return { dataForm: {}, //搜索数据 tableData: [], //表格数据 pageIndex: 1, pageSize: 10, totalPage: 0, } }, created() { // 实例被创建之后执行代码 this.getDataList() }, methods: { // 方法 //请求数据列表 getDataList() { const params = { 'currentPage': this.pageIndex, 'pageSize': this.pageSize, 'title': this.dataForm.title ? this.dataForm.title : null, 'status': this.dataForm.status ? this.dataForm.status : null, 'startTime': this.dataForm.time ? this.dataForm.time[0] + ' 00:00:00' : null, 'endTime': this.dataForm.time ? this.dataForm.time[1] + ' 23:59:59': null } /***接口方法***/(params).then(res => { if (res.data.code == 0) { //成功方法 } else { //失败方法 } }) }, //重置 resetBtn() { this.dataForm = {} this.getDataList(this.pageIndex, this.pageSize) }, }, |
element 表格搜索，如果页码出现大量变换，一般重置第一页开始展示
|
1 2 3 4 5 |
btnSearch() { this.pageIndex = 1 this.getDataList() } |
element 分页，切换一页显示条数方法，如果页码出现大量变换，一般重置第一页开始展示
|
1 2 3 4 5 6 |
btnSearch(val) { this.pageIndex = 1 this.pageSize=val this.getDataList() } |
2.表格中对【上下架】、【排序】、【选择】进行编辑
|
1 2 |
<el-card style="margin:10px;"><el-table :data="tableData" border="" v-loading="tableLoading" style="width: 100%;"><el-table-column prop="borrowTypeName" header-align="center" align="center" label="是否上架"><template slot-scope="scope"><el-tooltip :content="scope.row.status==1?'正常':'禁用'" placement="top"><el-switch :active-value="scope.row.status=== 1" :inactive-value="scope.row.status=== 0" active-color="#13ce66" inactive-color="#ff4949"></el-switch></el-tooltip></template></el-table-column><el-table-column prop="borrowTypeName" header-align="center" align="center" label="是否上架"><template slot-scope="scope"><el-tooltip :content="scope.row.status==1?'是':'否'" placement="top"><el-button type="danger" v-if="scope.row.status==1" plain="" size="small">去下架</el-button><el-button type="success" v-if="scope.row.status==2" plain="" size="small">去上架</el-button></el-tooltip></template></el-table-column><el-table-column prop="ord" header-align="center" align="center" label="排序(Enter键确定)"><template slot-scope="scope"><el-button plain="" size="medium" v-if="isChangeOrd">{{scope.row.ord}}</el-button><el-input v-model="scope.row.ord" suffix-icon="el-icon-edit" v-else="" placeholder="无"></el-input></template></el-table-column><el-table-column header-align="center" align="center" label="个性化推荐"><template slot-scope="scope"><el-select v-model="scope.row.recommendIndex"><el-option :value="0" label="默认"></el-option><el-option :value="1" label="推荐到首页"></el-option><el-option :value="2" label="推荐到热门"></el-option></el-select></template></el-table-column></el-table></el-card> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
export default { name: 'newsList', data() { return { isChangeOrd: true, //更改排序 } }, methods: { // 方法 //switch是否上架 switchChange(row) { const params = {}; params.id = row.id; params.status = row.status == 1 ? 0 : 1; /***接口方法***/(params).then(res => { if (res.code == 0) { this.getDataList() this.$message.success(res.data.msg); } }) }, //button是否上架 buttonChange(index, row) { let params = { id: row.id, status: row.status == 1 ? '2' : '1' } ***接口方法***(params).then(res => { if (res.data.code == 0) { this.getDataList() this.$message.success(res.data.msg); } }) }, //更改排序 changeOrd(index, row) { let params = { id: row.id, ord: row.ord } /***接口方法***/(params).then(res => { if (res.data.code == 0) { this.getDataList() this.isChangeOrd = true; this.$message.success(res.data.msg); } }) }, //个性化推荐 changeOption (e, row) { let params = { proId: row.proId, recommendIndex: e } ***接口方法***(params).then(res => { if (res.data.code == 0) { this.getDataList() this.$message.success(res.data.msg); } }) } }, |
3.使用vue-clipboard2实现复制链接的功能
1.安装vue-clipboard2插件
|
1 2 |
npm install --save vue-clipboard2 |
2.在main.js里引入：
|
1 2 3 |
import VueClipboard from 'vue-clipboard2' Vue.use(VueClipboard) |
3.在.vue页面中使用
|
1 |
<el-button type="success" v-clipboard:copy="(scope.row.link)" v-clipboard:success="onCopy" v-clipboard:error="onError">复制链接</el-button> |
4.在methods中写入方法
|
1 2 3 4 5 6 7 8 9 10 11 |
methods: { // 方法 // 复制成功 onCopy (e) { this.$message.success(`复制成功 ${e.text}`) }, // 复制失败 onError (e) { this.$message.error(`复制失败`) }, } |
4.使用vue-quill-editor实现富文本编辑
1.安装依赖
|
1 2 |
npm install vue-quill-editor –save |
2.在main.js里引入：
|
1 2 3 4 5 6 7 |
import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' Vue.use(VueQuillEditor) |
3.在.vue页面中使用
|
1 2 3 4 5 6 |
<div> <quill-editor v-model="ruleForm.content" ref="myQuillEditor" class="editer"></quill-editor> </div> |
4.在methods中写入方法
|
1 2 3 4 5 6 7 |
methods: { // 方法 onEditorBlur(){}, // 失去焦点事件 onEditorFocus(){}, // 获得焦点事件 onEditorChange(){}, // 内容改变事件 onEditorReady(){} } |
5.解决el-input类型为 type=’number’ 不显示上下箭头
改变之前
改变之后
1.html代码：
|
1 |
<el-input v-model="form.newMemberBonus" type="number"></el-input> |
2.css代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<style lang="scss"> // 处理input type = number的上下箭头 input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; } input[type="number"] { -moz-appearance: textfield; } </style> |
6.解决当el-select选中值绑定为对象时处理
|
1 |
<el-form-item label="字段:"><el-select v-model="ruleForm.detail" multiple="" placeholder="请选择" value-key="id"><el-option v-for="(item) in DataField" :key="item.id" :label="item.columnComment" :value="item"></el-option></el-select></el-form-item> |
要点：value绑定的是对象时，在el-select 添加value-key=”id”属性，el-option中添加:key=”item.id”属性。其中value-key的值与key绑定的属性值对应。
7.使用upload照片墙多图上传-自定义方式显示(方便回显编辑)
自定义显示图片数组
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<template> <div style="display:inline-block;"> <el-upload action="/admin/adminOss/imgUpload" list-type="picture-card" :show-file-list="false" :headers="headers" :on-success="multipleUploadSuccess" :on-remove="handleRemove" :limit="5"><i class="el-icon-plus"></i> </el-upload> </div> <div class="color-item" v-for="(item,index) in multipleList" :key="index"> <img :src="item" alt="" srcset=""> </div> <div class="tips">商品详情图：（最多可以上传5张图片，建议尺寸800*800px,双击可删除）</div> </template> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
import store from '@/store' export default { name: 'newsList', data() { return { headers: { //上传图片headers Authorization: 'Bearer ' + store.getters.access_token }, multipleList: [], //详情图图片数组 } }, methods: { // 方法 //图片上传成功回调，将图片放入显示的数组中 multipleUploadSuccess(res, file) { this.multipleList.push(res.data) }, //原自带删除改写为下面的双击删除 handleRemove(file, fileList) { console.log(file, fileList); }, //双击删除多图 dblclick(e) { //双击删除 this.multipleList.splice(e, 1) } } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<style scoped="" lang="scss"> .tips { font-size: 14px; margin-bottom: 20px; } /* 多张 */ .color-item { display: inline-block; float: left; border: 1px dashed #ddd; margin: 5px 5px 0 0; padding: 1px; img { width: 130px; height: 130px; } } </style> |
8.vue+element-ui+form 实现动态生成表单
初始状态
点击添加之后
可切换活动类型
elementUI官网有对单表单的添加，实现方式是，先写死一个必须的表单，需要新增表单的放在一个div里，在div中使用v-for生成，达到同时增加的效果
以下为代码（请灵活运用）：
|
1 2 3 4 5 6 7 8 9 |
<template> <div class="title">活动规则:</div> <el-form status-icon="" label-width="68px" class="demo-ruleForm"><el-form-item label="活动类型"><el-radio-group v-model="ruleForm.type"><el-radio :label="1">满减促销</el-radio><el-radio :label="2">满折促销</el-radio></el-radio-group></el-form-item> <div v-for="(item, index) in reduceList" :key="index"> <el-row><el-col :span="3"><el-form-item label="满"><el-input v-model="item.fullPrice"></el-input></el-form-item></el-col><el-col :span="3" v-if="ruleForm.type==1"><el-form-item label="减"><el-input v-model="item.reducePrice"></el-input></el-form-item></el-col><el-col :span="3" v-else=""><el-form-item label="折"><el-input v-model="item.discount"></el-input></el-form-item></el-col><el-col :span="4" :offset="1"><el-button type="success" icon="el-icon-plus" plain=""></el-button><el-button v-if="reduceList.length>1" type="danger" icon="el-icon-minus" plain=""></el-button></el-col></el-row> </div> </el-form></template> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
export default { name: 'addActivity', data() { return { ruleForm: { type: '', //促销类型 }, reduceList: [{ //满减满折促销规则----先写死一个即初始状态图 type: '', //1:满减促销 2:满折促销 fullPrice: '', reducePrice: '', discount: '' }], } }, methods: { // 方法 //新增一条规则配置 addConfigList() { if (this.ruleForm.type == 1) { //此处就是判断不同活动类型 定义不同的type this.reduceList.push({ type: 1, //1:满减促销 2:满折促销 fullPrice: '', reducePrice: '', discount: '' }) } else { this.reduceList.push({ type: 2, //1:满减促销 2:满折促销 fullPrice: '', reducePrice: '', discount: '' }) } }, //删除一条规则配置 removeConfigList(item) { if (item.id) { //有id接口删除 无本地删除( 自行和后台约定) let params = { id: item.id } /*******接口方法******/(params).then(res => { if (res.data.code == 0) { this.$message.success(res.data.msg); let index = this.reduceList.indexOf(item) if (index !== -1) { this.reduceList.splice(index, 1) } } }) } else { //本地删除 let index = this.reduceList.indexOf(item) if (index !== -1) { this.reduceList.splice(index, 1) } } }, |
注意：删除行的话 本地删除或者接口删除要根据后台定义，要是本地删除就更简单了。参考文章
9.vue+element-ui+table 实现动态表头+可编辑表格
项目要求:
1.根据选择不同属性类型显示不同的表头，表头中销售价格、市场价格、属性图是固定的
2同时属性类型及属性类型的值都是动态的
3同时可以动态添加或删除一条数据
表头一
表头二
以下为代码（固定表头的图片字段部分去掉了，不是此次要点）：
|
1 2 3 |
<el-table :data="skuData" class="tb-edit" style="width: 80%" border="" align="center"><el-table-column v-for="(item,index) in attributeList" :label="item.name" :key="index" :property="item.name" align="center"><template slot-scope="scope"><el-select v-model="scope.row[scope.column.property]" clearable="" placeholder="请选择" value-key="id"><el-option v-for="attItem in item.sysCommodityAttributeValueEntities" :key="attItem.id" :label="attItem.value" :value="attItem"></el-option></el-select></template></el-table-column><el-table-column header-align="center" align="center" label="销售价格"><template slot-scope="scope"><el-input v-model="scope.row.price" suffix-icon="el-icon-edit" placeholder="销售价格"></el-input></template></el-table-column><el-table-column header-align="center" align="center" label="市场价格"><template slot-scope="scope"><el-input v-model="scope.row.marketPrice" suffix-icon="el-icon-edit" placeholder="市场价格"></el-input></template></el-table-column><el-table-column label="操作" align="center" width="180"><template slot-scope="scope"><el-button size="mini" plain="" type="success">查验 </el-button><el-button size="mini" plain="" type="danger">删除 </el-button></template></el-table-column></el-table> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
export default { name: 'addProduct', data() { return { //动态表头--届时是后台返回的，为了方便观看所以写死的 attributeList:[{ name:'容量', property:'capacity', sysCommodityAttributeValueEntities:[{id:1,value:'48v'},{id:2,value:'60v'},{id:3,value:'72v'}] },{ name:'颜色', property:'color', sysCommodityAttributeValueEntities:[{id:1,value:'红色'},{id:2,value:'黑色'}] }] //表格数据 skuData: [{ //默认写死一条固定表头的字段 price: '', //销售价格 marketPrice: '', //市场价格 }], } }, methods: { // 方法 //添加一条货品sku handleAddOneSku() { let oneSkuData = { price: '', marketPrice: '', } this.skuData.push(oneSkuData) }, //sku表单行删除 handleSkuDelete(index, row) { this.skuData.splice(index, 1) }, } |
动态渲染表头核心代码（通过一个循环拿到列的标签和列名）：
|
1 2 |
<el-table-column v-for="(item,index) in attributeList" :label="item.name" :property="item.name" align="center" :key="index"><template slot-scope="scope"><el-select v-model="scope.row[scope.column.property]" clearable="" placeholder="请选择" value-key="id"><el-option v-for="attItem in item.sysCommodityAttributeValueEntities" :key="attItem.id" :label="attItem.value" :value="attItem"></el-option></el-select></template></el-table-column> |
要点：在自定义模板里面通过scope.row[scope.column.property]取到当前行的列字段与下拉框进行双向绑定，这样就是实现了可编辑的动态表头的表格。参考文章
10.table组件自定义索引,多页数据从1开始排序
定义type=index表示索引列
自定义索引方法 :index="indexMethod"
|
1 |
<template><el-table :data="tableData" style="width: 100%"><el-table-column type="index" :index="indexMethod"></el-table-column></el-table></template> |
|
1 2 3 4 5 |
methods: { indexMethod(index) { return (this.pageNum-1) * this.pageSize +index +1 } |
tips:
this.pageNum:表示当前页码数
this.pageSize:表示每页显示的条数
index:table中:表示数据的索引，从0开始
(this.pageNum-1) * this.pageSize +index +1 ：表示当前页的索引开始值
例如：每页显示10条数据，第三页起始值则为21开始。（3-1）* 10 + 0 + 1 = 21
11 饿了么自定义滚动条el-scrollbar组件
image.png
滚动条组件
|
1 |
<el-scrollbar></el-scrollbar> |
(1)已知内容高度
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<div style="height:800px"> <el-scrollbar class="page-component__scroll"></el-scrollbar> <div> <style> .page-component__scroll{ height: 100%; } .page-component__scroll .el-scrollbar__wrap { overflow-x: auto; } <style> <p>(2)高度由内容撑开 <pre><code><html> <body> <div style='height:100%'> <el-scrollbar class='page-component__scroll'> <div> </style> </div> </div> |
未经允许不得转载：一点博客-青梅煮码-共享博客 » 整理vue + element-ui常用的功能及代码片段
评论抢沙发