Vue Element front-end application development conventional Element interface components

1. List interface and other module display processing

The conventional list display interface is generally divided into several areas: one is the query area, one is the list display area, and one is the paging component area at the bottom. The query area is mainly used for layout of common conditions, and some global or batch operations are added, such as import, export, add, batch add, batch delete and other buttons; the main list display area is relatively complex, and requires a more user-friendly display of various data. It can be displayed in combination with tags, icons, buttons and other interface elements. The list generally includes some operations for processing single-line records, such as view, edit, and delete. If it is a batch deletion, it can be placed in the top button area.

As for the regular buttons, tables, and paging components, we have already introduced them before, so we will not repeat them here.

Before introducing the specific interface components, let's first understand the overall interface layout. We put the regular list interface, add, edit, view, import and other interfaces together. Except for the list page, other content is handled in the form of pop-up dialog boxes, as shown in the following interface diagram.

The :visible property value of each dialog box determines which modal dialog box is displayed or hidden.

In the Vue JS module, in addition to defining the variables displayed in the corresponding dialog box, for each dialog box, we define a form information for two-way binding of data.

The definition of common add, edit, view, import and other contents is defined as a dialog component. The usage code of the common dialog component is as follows.

<el-dialog
  title="Tips"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <span>This is a message</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">Cancel</el-button>
    <el-button type="primary" @click="dialogVisible = false">OK</el-button>
  </span>
</el-dialog>

In order to control the style of the dialog box, we pay attention to the slot in the footer. We usually put the processing buttons here. For example, for the viewing interface dialog box, we define it as follows.

Generally speaking, for scenarios with a lot of form content, we usually separate them into multiple tabs for display or entry, which makes management easier. The overall effect of the interface is shown below.

For the data binding of the dialog box, we first request the JSON data through the API module before opening the dialog box, and then bind it to the corresponding dialog model attribute. For example, for the viewing interface, our processing logic is as follows.

showView(id) {
      var param = { id: id }
      GetProductDetail(param).then(data => {
        Object.assign(this.viewForm, data);
      })
      this.isView = true
    },

For double-clicking the table, we also bind its view details processing operation, as shown in the following template code and JS code.

The template HTML code is as follows:

<el-table
  v-loading="listLoading"
  :data="productlist"
  border
  fit
  stripe
  highlight-current-row
  :header-cell-style="{background:'#eef1f6',color:'#606266'}"
  @selection-change="selectionChange"
  @row-dblclick="rowDbclick"
>

The JS logic code is as follows

rowDbclick(row, column) {
      var id = row.ID
      this.showView(id);
    },

2. Use of conventional interface components

Generally speaking, when we use interface components, we refer to the official website "Element Component Usage" and find the code of the corresponding component for reference. Here is a brief introduction to various common Element components.

1) Forms and form items, single text boxes

For the form, we generally define a corresponding name and set the model name corresponding to its data, as shown below.

<el-form ref="viewForm" :model="viewForm" label-width="80px">

For form items, you usually just need to define the Label of the form item, and then insert the corresponding input control or display control into it. For use with a single text component, as shown below.

 <el-form-item label="Product Number">
   <el-input v-model="editForm.ProductNo" />
 </el-form-item>

Among them, v-model="editForm.ProductNo" is the corresponding bound data.

For form items, you can add validation processing to the fields, and check whether the customer's input is valid before the data is submitted.

<el-form-item
    prop="email"
    label="Mailbox"
    :rules="[
      { required: true, message: 'Please enter your email address', trigger: 'blur' },
      { type: 'email', message: 'Please enter a valid email address', trigger: ['blur', 'change'] }
    ]"
  >
    <el-input v-model="dynamicValidateForm.email"></el-input>
  </el-form-item>

Note that for this form item, you must add a prop attribute setting, such as prop="email".

Generally, in order to control the layout, we also combine el-row to perform a layout process, as shown in the following code (one row equals span of 24, span=12 means two control groups are placed in one row).

<el-row>
  <el-col :span="12">
    <el-form-item label="Product Number">
      <el-input v-model="editForm.ProductNo" />
    </el-form-item>
  </el-col>
  <el-col :span="12">
    <el-form-item label="barcode">
      <el-input v-model="editForm.BarCode" />
    </el-form-item>
  </el-col>
</el-row>

2) Binding of drop-down list control

The binding process of the drop-down list is also to bind the value through v-model, while the options can be bound through the data list.

<el-form-item label="Product Type">
  <el-select v-model="editForm.ProductType" filterable="" placeholder="Please select">
    <el-option
      v-for="(item, key) in typeList"
      :key="key"
      :label="item.value"
      :value="item.key"
    />
  </el-select>
</el-form-item>

As for the typeList in the options, we can get it when the page is initialized.

created() {
    // Get the product type for binding dictionaries, etc. GetProductType().then(data => {
      if (data) {
        data.forEach(item => {
          this.productTypes.set(item.id, item.name)
          this.typeList.push({ key: item.id, value: item.name })
        })

        // Get list information this.getlist()
      }
    });
  },

For a regular multi-line text box, the processing is similar to that of a normal single-line text box. Just specify its type="textarea" and the value of rows.

<el-tab-pane label="Description" name="second">
    <el-form-item label="Description">
      <el-input v-model="editForm.Description" type="textarea" :rows="10" />
    </el-form-item>
  </el-tab-pane>

For some content that may need to display HTML, we can use the DIV control to display it, and use the v-html tag to process the content containing HTML code.

 <el-tab-pane label="Details">
    <el-form-item label="Detailed description">
      <div class="border-radius" v-html="viewForm.Note" />
    </el-form-item>
  </el-tab-pane>

3) Picture display

For some server images that need to be displayed, we can request and process them according to the settings of the Element image component. The following includes the display and preview operations of single and multiple images.

The code for the image display is shown below.

<el-tab-pane label="Image information">
    <el-form-item label="Cover image">
      <el-image
        style="width: 100px; height: 100px"
        :src="viewForm.Picture"
        :preview-src-list="[viewForm.Picture]"
      />
    </el-form-item>
    <el-form-item label="Banner picture">
      <el-image
        style="width: 100px; height: 100px"
        :src="viewForm.Banner"
        :preview-src-list="[viewForm.Banner]"
      />
    </el-form-item>
    <el-form-item label="Product display picture">
      <el-image
        v-for="item in viewForm.pics"
        :key="item.key"
        class="border-radius"
        :src="item.pic"
        style="width: 100px; height: 100px;padding:10px"
        :preview-src-list="getPreviewPics()"
      />
    </el-form-item>
  </el-tab-pane>

In the above figure, if it is a single picture, then we can set a collection as a url for preview, such as [viewForm.Banner]. If it is multiple pictures, we need to use a function to get the picture list, as shown in the getPreviewPics() function.

getPreviewPics() {
      // Convert the pic collection in ViewForm.pics var list = []
      if (this.viewForm.pics) {
        this.viewForm.pics.forEach(item => {
          if (item.pic) {
            list.push(item.pic)
          }
        })
      }
      return list
    }

4) Third-party extension controls

For some applications that require extended components, we usually search for solutions and install the corresponding components through npm. For example, for barcodes and QR codes, I use @chenfengyuan/vue-barcode and @chenfengyuan/vue-qrcode. Generally, you can find some popular third-party components by searching keywords on Github.

There are specific instructions for installing these components, as shown below (if uninstalling, just change install to uninstall).

npm install @chenfengyuan/vue-barcode vue

as well as

npm install @chenfengyuan/vue-qrcode vue

The display effects of barcode and QR code are as follows

If we import the barcode and qrcode components globally, we can import them in main.js, as shown in the following code

// Import barcode,qrcode
import VueBarcode from '@chenfengyuan/vue-barcode';
import VueQrcode from '@chenfengyuan/vue-qrcode';
Vue.component(VueBarcode.name, VueBarcode);

For rich text editing, I use the Tinymce third-party component to implement editing, and the display effect is shown below.

The code is as follows

<el-tab-pane label="Detailed description" name="third">
    <el-form-item label="Detailed description">
      <tinymce v-model="editForm.Note" :height="300" />
    </el-form-item>
  </el-tab-pane>

The above is the use of some common interface components. The operations of combining file upload and pictures will be introduced later.

3. Creation and use of custom components

The advantage of using Vue over previous BS development is that it is easy to implement componentization, which is great. Once we define a control, we can use it in multiple interfaces, which is very convenient, and the encapsulation can be handled according to our needs.

The general interface effect of the query area is shown below. In addition to some commonly used query conditions, there are usually some drop-down lists. These may be the contents bound to the background dictionary. You can consider using it as a general dictionary drop-down list component.

In fact, when entering the interface, these condition drop-down lists are often required.

So let's define a custom component and use it on the interface.

Create a directory in the Components directory and create a component vue file named my-dictdata.vue as shown below.

For the interface template code, we will mainly use a select component.

<template>
  <el-select v-model="svalue" filterable clearable placeholder="Please select">
    <el-option
      v-for="(item, index) in dictItems"
      :key="index"
      :label="item.Text"
      :value="item.Value"
    />
  </el-select>
</template>

The script logic code is as follows.

<script>
// Import API module class method import { GetDictData } from '@/api/dictdata'

export default {
  name: 'MyDictdata', // component name props: {
    typeName: { // Dictionary type, get data from the backend dictionary interface type: String,
      default: ''
    },
    options: {// Fixed list mode, direct binding type: Array,
      default: () => { return [] }
    }
  },
  data() {
    return {
      dictItems: [], // set dictionary list svalue: '' // selected value }
  },
  watch:
    // Determine whether the value of the drop-down box has changed svalue(val, oldVal) {
      if (val !== oldVal) {
        this.$emit('input', this.svalue);
      }
    }
  },
  mounted() {
    var that = this;

    if (this.typeName && this.typeName !== '') {
      // Use the dictionary type to request data from the server GetDictData(this.typeName).then(data => {
        if (data) {
          data.forEach(item => {
            if (item && typeof (item.Value) !== 'undefined' && item.Value !== '') {
              that.dictItems.push(item)
            }
          });
        }
      })
    } else if (this.options && this.options.length > 0) {
      // Using a fixed dictionary list this.options.forEach(item => {
        if (item && typeof (item.Value) !== 'undefined' && item.Value !== '') {
          that.dictItems.push(item)
        }
      });
    }
    // Set the default value this.svalue = this.value;
  },
  methods: {

  }
}
</script>

The main thing is to deal with the acquisition of dictionary data and bind it to the model object.

Before using it on the page, you need to import the components we defined

import myDictdata from '@/components/Common/my-dictdata'

Then include it in components

export default {
  components: { myDictdata },

Then you need to use the select component code directly

<el-select v-model="searchForm.ProductType" filterable clearable placeholder="Please select">
  <el-option
    v-for="(item, key) in typeList"
    :key="key"
    :label="item.value"
    :value="item.key"
  />
</el-select>

It can be simplified to one line of code

<my-dictdata v-model="searchForm.ProductType" type-name="Product Type" />

For fixed lists, we can also use general processing code

<my-dictdata v-model="searchForm.Status" :options="Status" />

Status is a collection of objects defined

Status: [
    { Text: 'Normal', Value: 0 },
    { Text: 'Recommend', Value: 1 },
    { Text: 'Disable', Value: 2 }
  ]

Isn’t it very convenient, and the effect obtained remains unchanged.

The above is the content of multiple pages, which are integrated together through the dialog layer mode, and introduces how to use it, as well as how to use the common Element components in the interface, and define a main definition component of a dictionary list to simplify the use of interface code.

The above is the detailed content of the conventional Element interface components of Vue Element front-end application development. For more information about Vue Element conventional Element interface components, please pay attention to other related articles on 123WORDPRESS.COM!