Vue rich text editor and element-UI common features

1. Common table header search: INPUT + SELECT +daterange

<template>
  <! -- Search data -->
    <el-card style="margin:10px;">
      <el-form :inline="true" :model="dataForm" label-width='100px'>
        <el-form-item label=Title: "">
          <el-input v-model="dataForm.title" placeholder="Please enter the information title keyword" clearable></el-input>
        </el-form-item>
        <el-form-item label="Shelves or not :">
          <el-select v-model="dataForm.status" placeholder="Please select the shelf status" clearable>
            <el-option label="On shelves" value="1"></el-option>
            <el-option label="Not available" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Add date :">
          <el-date-picker v-model="dataForm.time" value-format="yyyy-MM-dd" type="daterange" range-separator="To"
            start-placeholder="Start Date" end-placeholder="End Date">
          </el-date-picker>
        </el-form-item>
        <el-form-item style="float:right;">
          <el-button type="primary" @click="getDataList()">search</el-button>
          <el-button @click="resetBtn()">reset</el-button>
        </el-form-item>
      </el-form>
    </el-card>
</template>
Copy the code

 export default {
  name: 'newsList'.data() {
    return {
      dataForm: {}, // Search for data
      tableData: [], // Table data
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
    }
  },
  created() { // Execute the code after the instance is created
    this.getDataList()
  },
  methods: { / / method
     // Request a list of data
    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
      }
      /*** interface method ***/(params).then(res => {
        if (res.data.code == 0) {
          // Success method
        } else {
          // Fail method}})},/ / reset
    resetBtn() {
      this.dataForm = {}
      this.getDataList(this.pageIndex, this.pageSize)
    },
  },
Copy the code

Element table search, if there is a large number of page number changes, generally reset the first page to start display

btnSearch() {
  this.pageIndex = 1
  this.getDataList()
}
Copy the code

Element pagination, a method of switching the number of pages displayed on one page. If a large number of page changes occur, the first page is normally reset to display

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

2. Edit “Off and off”, “Sort” and “select” in the table

<! List -- - >
    <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="Shelves or not">
          <template slot-scope="scope">
            <el-tooltip :content="scope.row.status==1? 'Normal ':' disabled' 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> -->
                 <! -- If the receiver parameter is a number, you can try two ways to write each other -->
             </el-tooltip>
          </template>
        </el-table-column>
       <! -- Button click event -->
        <el-table-column prop="borrowTypeName" header-align="center" align="center" label="Shelves or not">
          <template slot-scope="scope">
            <el-tooltip :content="scope.row.status==1? Yes: No" placement="top">
              <el-button type="danger" v-if="scope.row.status==1" plain size="small"
                @click="buttonChange(scope.$index,scope.row)">Go to the shelves</el-button>
              <el-button type="success" v-if="scope.row.status==2" plain size="small"
                @click="buttonChange(scope.$index,scope.row)">Go to the shelves</el-button>
            </el-tooltip>
          </template>
        </el-table-column>
        <! -- Input Enter Event sort -->
        <el-table-column prop="ord" header-align="center" align="center" label="Sort (Enter ok)">
          <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="No" @keyup.enter.native="changeOrd(scope.$index,scope.row)"></el-input>
          </template>
        </el-table-column>
      <! -- select change event -->
       <el-table-column header-align="center" align="center" label="Personalized recommendation">
        <template slot-scope="scope">
          <el-select  @change="changeOption($event,scope.row)"  v-model="scope.row.recommendIndex">
              <el-option :value="0" label="Default"></el-option>
              <el-option :value="1" label="Recommended to home page"></el-option>
              <el-option :value="2" label="Recommended to hot"></el-option>
            </el-select>
        </template>
      </el-table-column>

     </el-table>
    </el-card>
Copy the code

export default {
  name: 'newsList'.data() {
    return {
      isChangeOrd: true.// Change the sort
    }
  },
  methods: { / / method
   // Whether the switch is installed
    switchChange(row) { 
        const params = {};
        params.id = row.id;
        params.status = row.status == 1 ? 0 : 1;
        /*** interface method ***/(params).then(res => {
          if (res.code == 0) {
            this.getDataList()
            this.$message.success(res.data.msg); }})},// Whether button is on the shelf
    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); }})},// Change the sort
    changeOrd(index, row) {
      let params = {
        id: row.id,
        ord: row.ord
      }
      /*** interface method ***/(params).then(res => {
        if (res.data.code == 0) {
          this.getDataList()
          this.isChangeOrd = true;
          this.$message.success(res.data.msg); }})},// Personalized recommendationChangeOption (e, row) {let params = {} proId: row. ProId, recommendIndex: e * * * * * * interface methods (params). Then (res = > {if (res.data.code == 0) {
          this.getDataList()
          this.$message.success(res.data.msg); }}}}),Copy the code

3. Use vue-Clipboard2 to copy links

1. Install vuE-Clipboard2 plug-in

npm install --save vue-clipboard2
Copy the code

2. Introduce:

import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)
Copy the code

3. Use it on the. Vue page

<el-button  type="success"  v-clipboard:copy="(scope.row.link)" v-clipboard:success="onCopy" 
v-clipboard:error="onError">Copy the link</el-button>
Copy the code

4. Write methods in methods

methods: { / / method
   // Replication succeeded
     onCopy (e) {
       this.$message.success('Replication succeeded${e.text}`)},// Replication failed
     onError (e) {
       this.$message.error('Replication failed')}},Copy the code

4. Use vue-quill-Editor to achieve rich text editing

1. Install dependencies

NPM install vue quill - editor - saveCopy the code

2. Introduce:

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)
Copy the code

3. Use it on the. Vue page

<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>
Copy the code

4. Write methods in methods

methods: { / / method
   onEditorBlur() {},// Lose focus events
   onEditorFocus() {},// Get the focus event
   onEditorChange() {},// Change the content event
   onEditorReady(){}
}
Copy the code

5. If the el-input type is type=’number’, the up and down arrows are not displayed

Before the change

After the change

1. The HTML code:

<el-input v-model="form.newMemberBonus" type='number'></el-input>
Copy the code

2. The CSS code:

<style  lang='scss'> // Process inputtypeInput ::-webkit-outer-spin-button, input::-webkit-inner-spin-button {-webkit-appearance: none; } input[type="number"] {
      -moz-appearance: textfield;
    }

</style>
Copy the code

6. Resolve the problem when the el-select value is bound as an object

<el-form-item label="Field.">
   <el-select v-model="ruleForm.detail" multiple placeholder="Please select" 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>
Copy the code

If value is bound to an object, add the value key=”id” attribute to el-select and add the key=”item.id” attribute to el-option. The value of value-key corresponds to the value of the attribute bound to the key.

7. Use upload photo wall to upload multiple images – custom display (easy to edit by echo)

Custom display picture array

<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">Product details :(a maximum of 5 pictures can be uploaded, the recommended size is 800*800px, double-click to delete)</div>
</template>
Copy the code

import store from '@/store'
export default {
  name: 'newsList'.data() {
    return {
     headers: { // Upload headers
        Authorization: 'Bearer ' + store.getters.access_token
      },
      multipleList: [], // Detail graph image array
    }
  },
  methods: { / / method
    // Image upload success callback, put the image into the display array
    multipleUploadSuccess(res, file) {
      this.multipleList.push(res.data)},// Double click delete
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    // Double click to delete multiple images
    dblclick(e) { // Double click delete
      this.multipleList.splice(e, 1)}}Copy the code

<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>
Copy the code

8. Vue + element-UI + Form dynamically generates forms

The initial state

After I hit Add

You can switch the activity type

ElementUI can add a single form by writing a required form, placing the new form in a div, and using v-for to generate the new form.

  <template>
     <div class="title">Activity Rules:</div>
      <el-form status-icon label-width="68px" class="demo-ruleForm">
        <el-form-item label="Activity Type">
          <el-radio-group v-model="ruleForm.type" @change='radioChoose'>
            <el-radio :label="1">Full reduction promotion</el-radio>
            <el-radio :label="2">Full discount sales promotion</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="Full">
                  <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="Cut">
                  <el-input v-model="item.reducePrice"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="3" v-else>
                <el-form-item label="Fold">
                  <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>
Copy the code

export default {
  name: 'addActivity'.data() {
    return {
     ruleForm: {
        type: ' '.// Promotion type
      },
      reduceList: [{ // Full subtraction full discount promotion rules ----
        type: ' './/1: full discount promotion 2: full discount promotion
        fullPrice: ' ',
        reducePrice: ' ',
        discount: ' '
      }],
    }
  },
  methods: { / / method
    // Add a rule configuration
    addConfigList() {
      if (this.ruleForm.type == 1) {  // Define different types for different activity types
        this.reduceList.push({
          type: 1.//1: full discount promotion 2: full discount promotion
          fullPrice: ' ',
          reducePrice: ' ',
          discount: ' '})}else {
        this.reduceList.push({
          type: 2.//1: full discount promotion 2: full discount promotion
          fullPrice: ' ',
          reducePrice: ' ',
          discount: ' '})}},// Delete a rule configuration
    removeConfigList(item) {
      if (item.id) { // Delete the interface with id. Delete the interface with id.
        let params = {
          id: item.id
        }
        /******* Interface method ******/(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 {   // Local delete
        let index = this.reduceList.indexOf(item)
        if(index ! = = -1) {
          this.reduceList.splice(index, 1)}}},Copy the code

Vue + element-UI +table implement dynamic table header + editable table

Project requirements: 1. Display different table headers according to different attribute types. Sales price, market price and attribute graph in table headers are fixed; 2

A header

2 meter

The following is the code (the image field of the fixed table header has been removed, which is not the main point) :

    <el-table :data="skuData" class="tb-edit" style="width: 80%" border align="center"> <! -- Dynamic table header --><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="Please select" 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><! -- Fixed table header --><el-table-column header-align="center" align="center" label="Sale price">
              <template slot-scope="scope">
                <el-input v-model="scope.row.price" suffix-icon='el-icon-edit' placeholder="Sale price"></el-input>
              </template>
            </el-table-column>
            <el-table-column header-align="center" align="center" label="Market price">
              <template slot-scope="scope">
                <el-input v-model="scope.row.marketPrice" suffix-icon='el-icon-edit' placeholder="Market price"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="Operation" align="center" width="180">
              <template slot-scope="scope">
                <el-button size="mini" plain type="success" @click="handleSkuSave(scope.$index,scope.row)">inspection</el-button>
                <el-button size="mini" plain type="danger" @click="handleSkuDelete(scope.$index,scope.row)">delete</el-button>
              </template>
            </el-table-column>
          </el-table>
Copy the code

export default {
  name: 'addProduct',
  data() {
    return {
      // The dynamic header is then returned by the background, so it is written to facilitate viewing
       attributeList:[{
              name:'capacity',
              property:'capacity',
              sysCommodityAttributeValueEntities:[{id:1.value:'48v'},{id:2.value:'60v'},{id:3.value:'72v'}]
          },{
              name:The 'color',
              property:'color',
              sysCommodityAttributeValueEntities:[{id:1.value:'red'},{id:2.value:'black'}}]]// Table data
        skuData: [{  // Write a fixed header field by default
              price: ' '.// Sales price
              marketPrice: ' '.// Market price
            }], 
         }
  },
  methods: { / / method
     // Add a goods SKU
    handleAddOneSku() {
      let oneSkuData = {
        price: ' ',
        marketPrice: ' ',}this.skuData.push(oneSkuData)
    },
    // skU form row deleted
    handleSkuDelete(index, row) {
       this.skuData.splice(index, 1)}},Copy the code

Core code for dynamically rendering headers (a loop to fetch the column label and column name) :

<! -- Dynamic table header -->
  <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="Please select" 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>
Copy the code

10. Table component custom index, multi-page data sort from 1

IndexMethod =”indexMethod”

<template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      type="index"
      :index="indexMethod">
    </el-table-column>
  </el-table>
</template>
Copy the code

methods: {
    indexMethod(index) {
      return (this.pageNum-1) * this.pageSize +index +1
}
Copy the code

tips: This. pageSize: indicates the number of pages displayed on each page. index: indicates the index of data, starting from 0 (this. pagene-1) * this.pageSize +index +1: Indicates the start index value of the current page. For example, 10 data items are displayed on each page. The start value of the third page is 21. 3 minus 1 times 10 plus 0 plus 1 is 21

11. Customize the el-ScrollBar component

image.png

Scrollbar assembly

<el-scrollbar></el-scrollbar>
Copy the code

(1) Known content height

<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>
Copy the code

(2) The height is supported by the content

<html>
    <body>
        <div style='height:100%'>
            <el-scrollbar class='page-component__scroll'></el-scrollbar>
        <div>
    </body>
</html>
<style>
  html.body{
      height:100%
      overflow:hidden; /* Prevents the built-in scroll bar from being displayed when the page is manually refreshed
  }
  .page-component__scroll{
      height: 100%;
  }
  .page-component__scroll .el-scrollbar__wrap {
      overflow-x: auto;
  }
<style>
Copy the code

12. Image preview component el-image-viewer

<template>
    / /...<! -- View image --><el-image-viewer v-if="showViewer" :on-close="() => {showViewer = false; }" :url-list="imgList" />
</template>
<script>
  data(){
    return{
        showViewer:false.imgList: [' '.' '.' ',].// Zoom in to show a one-dimensional array of images}},components: {
    "el-image-viewer": () = >import("element-ui/packages/image/src/image-viewer"),},</script>
Copy the code