vue富文本编辑器和element-ui常用功能

1,406 阅读4分钟

1.常用表头搜索: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)
    },
  },

element 表格搜索,如果页码出现大量变换,一般重置第一页开始展示

btnSearch() {
  this.pageIndex = 1
  this.getDataList()
}

element 分页,切换一页显示条数方法,如果页码出现大量变换,一般重置第一页开始展示

btnSearch(val) {
  this.pageIndex = 1
  this.pageSize=val
  this.getDataList()
}

2.表格中对【上下架】、【排序】、【选择】进行编辑

<!-- 列表 -->
    <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-switch v-model='scope.row.status' :active-value="1" :inactive-value="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);
        }
      })
     }
  },

3.使用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(`复制失败`)
     },
}

4.使用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(){}
}

5.解决el-input类型为 type='number' 不显示上下箭头

改变之前

webp.jpg

改变之后

webp.jpg

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>

6.解决当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绑定的属性值对应。

7.使用upload照片墙多图上传-自定义方式显示(方便回显编辑)

webp (2).jpg 自定义显示图片数组

<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>

8.vue+element-ui+form 实现动态生成表单

webp (5).jpg

初始状态

webp (3).jpg

点击添加之后

webp (4).jpg

可切换活动类型

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)
        }
      }
    },

9.vue+element-ui+table 实现动态表头+可编辑表格

项目要求: 1.根据选择不同属性类型显示不同的表头,表头中销售价格、市场价格、属性图是固定的 2同时属性类型及属性类型的值都是动态的 3同时可以动态添加或删除一条数据

webp.jpg

表头一

webp (1).jpg

表头二

以下为代码(固定表头的图片字段部分去掉了,不是此次要点):

    <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>

10.table组件自定义索引,多页数据从1开始排序

定义type=index表示索引列 自定义索引方法 :index="indexMethod"

<template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      type="index"
      :index="indexMethod">
    </el-table-column>
  </el-table>
</template>
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组件

webp (2).jpg image.png

滚动条组件

<el-scrollbar></el-scrollbar>

(1)已知内容高度

<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>

(2)高度由内容撑开

<html>
    <body>
        <div style='height:100%'>
            <el-scrollbar class='page-component__scroll'></el-scrollbar>
        <div>
    </body>
</html>
<style>
  html,body{
      height:100%
      overflow:hidden; /*有效防止在页面进行手动刷新时显示内置滚动条*/
  }
  .page-component__scroll{
      height: 100%;
  }
  .page-component__scroll .el-scrollbar__wrap {
      overflow-x: auto;
  }
<style>

12、图片预览组件el-image-viewer

<template>
    //...
     <!-- 查看图片 -->
    <el-image-viewer v-if="showViewer" :on-close="() => {showViewer = false;}" :url-list="imgList" />
</template>
<script>
  data(){
    return{
        showViewer:false,
        imgList:['','','',],  //放大展示图片一维数组
  }
},
components: {
    "el-image-viewer": () =>import("element-ui/packages/image/src/image-viewer"),
},
</script>