目录:
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 实现动态表头 + 可编辑表格
常用表头搜索: input+select+daterange
- <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" @click="getDataList()"> 搜索 </el-button>
- <el-button @click="resetBtn()"> 重置 </el-button>
- </el-form-item>
- </el-form>
- </el-card>
- </template>
- 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)
- },
- },
表格中对 [上下架] ,[排序] ,[选择] 进行编辑
- <!-- 列表 -->
- <el-card style="margin:10px;">
- <el-table :data="tableData" border v-loading="tableLoading" style="width: 100%;">
- <!-- switch change 事件上下架 -->
- <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" @change='switchChange(scope.row)'>
- </el-switch>
- </el-tooltip>
- </template>
- </el-table-column>
- <!-- button click 事件上下架 -->
- <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"
@click="buttonChange(scope.$index,scope.row)"> 去下架 </el-button>
<el-button type="success" v-if="scope.row.status==2" plain size="small"
@click="buttonChange(scope.$index,scope.row)"> 去上架 </el-button>
- </el-tooltip>
- </template>
- </el-table-column>
- <!-- input Enter 事件排序 -->
- <el-table-column prop="ord" header-align="center" align="center" label="排序 (Enter 键确定)">
- <template slot-scope="scope">
- <el-button plain size="medium" v-if="isChangeOrd" @click="isChangeOrd=false">{{scope.row.ord}}</el-button>
- <el-input v-model="scope.row.ord" suffix-icon='el-icon-edit' v-else placeholder="无" @keyup.enter.native="changeOrd(scope.$index,scope.row)"></el-input>
- </template>
- </el-table-column>
- <!-- select change 事件 -->
- <el-table-column header-align="center" align="center" label="个性化推荐">
- <template slot-scope="scope">
- <el-select @change="changeOption($event,scope.row)" 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>
- 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);
- }
- })
- }
- },
使用 vue-clipboard2 实现复制链接的功能
1. 安装 vue-clipboard2 插件
NPM install --save vue-clipboard2
2. 在 main.JS 里引入:
- import VueClipboard from 'vue-clipboard2'
- Vue.use(VueClipboard)
3. 在. vue 页面中使用
<el-button type="success" v-clipboard:copy="(scope.row.link)" v-clipboard:success="onCopy"
v-clipboard:error="onError"> 复制链接 </el-button>
4. 在 methods 中写入方法
- methods: { // 方法
- // 复制成功
- onCopy (e) {
- this.$message.success(` 复制成功 ${e.text}`)
- },
- // 复制失败
- onError (e) {
- this.$message.error(` 复制失败 `)
- },
- }
使用 vue-quill-editor 实现富文本编辑
1. 安装依赖
NPM install vue-quill-editor -save
2. 在 main.JS 里引入:
- 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 页面中使用
- <div>
- <quill-editor v-model="ruleForm.content" ref="myQuillEditor" class="editer"
- @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
- @ready="onEditorReady($event)" @change="onEditorChange($event)"></quill-editor>
- </div>
4. 在 methods 中写入方法
- methods: { // 方法
- onEditorBlur(){}, // 失去焦点事件
- onEditorFocus(){}, // 获得焦点事件
- onEditorChange(){}, // 内容改变事件
- onEditorReady(){}
- }
解决 el-input 类型为 type='number' 不显示上下箭头
改变之前
改变之后
1.HTML 代码:
<el-input v-model="form.newMemberBonus" type='number'></el-input>
2.CSS 代码:
- <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>
解决当 el-select 选中值绑定为对象时处理
- <el-form-item label="字段:">
- <el-select v-model="ruleForm.detail" multiple placeholder="请选择" value-key="id" @change="chooseField($event)">
- <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 绑定的属性值对应.
使用 upload 照片墙多图上传 - 自定义方式显示 (方便回显编辑)
自定义显示图片数组
- <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" @dblclick='dblclick(index)' :key="index">
- <img :src="item" alt=""srcset="">
- </div>
- <div class="tips"> 商品详情图:(最多可以上传 5 张图片, 建议尺寸 800*800px, 双击可删除)</div>
- </template>
- 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)
- }
- }
- <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>
vue+element-ui+form 实现动态生成表单
初始状态
点击添加之后
可切换活动类型
elementUI 官网有对单表单的添加, 实现方式是, 先写死一个必须的表单, 需要新增表单的放在一个 div 里, 在 div 中使用 v-for 生成, 达到同时增加的效果
以下为代码 (请灵活运用):
- <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" @change='radioChoose'>
- <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
- @click.prevent="addConfigList"></el-button>
- <el-button v-if="reduceList.length>1" type="danger" icon="el-icon-minus" plain
- @click.prevent="removeConfigList(item)"></el-button>
- </el-col>
- </el-row>
- </div>
- </el-form>
- </template>
- 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)
- }
- }
- },
注意: 删除行的话 本地删除或者接口删除要根据后台定义, 要是本地删除就更简单了. 参考文章
vue+element-ui+table 实现动态表头 + 可编辑表格
项目要求:
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"
- @change="selectNumber($event)">
- <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" @click="handleSkuSave(scope.$index,scope.row)"> 查验
- </el-button>
- <el-button size="mini" plain type="danger" @click="handleSkuDelete(scope.$index,scope.row)"> 删除
- </el-button>
- </template>
- </el-table-column>
- </el-table>
- 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)
- },
- }
动态渲染表头核心代码 (通过一个循环拿到列的标签和列名):
- <!-- 动态表头 -->
- <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"
- @change="selectNumber($event)">
- <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] 取到当前行的列字段与下拉框进行双向绑定, 这样就是实现了可编辑的动态表头的表格. 参考文章
来源: http://www.jianshu.com/p/39756f6c53e2