“This is the 23rd day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021”

preface

The previous article introduced a simple list interface, but today we will add some new interfaces based on the Element-UI documentation, implemented entirely by the Element-UI component.

The new interface

SRC/API /url.js adds three interfaces:

export function delType(data) {
  return request({
    url: '/admin/DelType',
    method: 'POST',
    data
  })
}

export function addType(data) {
  return request({
    url: '/admin/AddType',
    method: 'POST',
    data
  })
}

export function editType(data) {
  return request({
    url: '/admin/EditType',
    method: 'POST',
    data
  })
}

Copy the code

The main code

The code is mainly a file, in the SRC /view/table/index.vue file is now divided into HTML and Javascript parts, and explain what you have learned in turn

<template> <div class="app-container"> <el-form class="filter-form"> <el-form-item> <el-button type="primary" </el-form> </el-form> </el-form> <el-table v-loading="listLoading" :data="list" elemental-loading-text =" loading..." border fit highlight-current-row > <el-table-column align="center" label="ID" width="95"> <template slot-scope="scope"> {{ scope.row.ID }} </template> </el-table-column> <el-table-column label="Title"> <template slot-scope="scope"> {{ Scope.row. Name}} </template> </el-table-column> <el-table-column align="center" fixed="right" label=" operation "width="190px">  <template slot-scope="scope"> <div class="flex-btns"> <el-button :loading="scope.row.loading" type="primary" @click="bindEdit(scope.row)"> </el-button type="info" @click="deteleType(scope.row)"> </el-button> </el-button> </template> </el-table-column> </el-table> <! Sync ="formAddVisible" width="450px" center> <el-form ref=" addForm "> <el-form-item label=" category name" >< EL-input V-model ="addForm.name" placeholder=" please input content "></el-input> </el-form-item> <el-form-item> <el-button native type="primary" @click="onSubmitAdd" </el-button> </el-form-item> </el-dialog> <! Sync ="formEditVisible" width="450px" center> <el-form ref=" addForm "> <el-form-item label=" category name" >< EL-input V-model ="editForm.name" placeholder=" please input category "></el-input> </el-form-item> <el-form-item> <el-button native type="primary" @click="onSubmitEdit" </el-button> </el-form-item> </el-dialog> </div> </template> <script> import { getTypeList, delType, addType, editType} from '@/api/url' export default { filters: { statusFilter(status) { const statusMap = { published: 'success', draft: 'gray', deleted: 'danger' } return statusMap[status] } }, data() { return { list: null, listLoading: true, formAddVisible: false, formEditVisible: false, addForm: { name: '' }, editForm: { id: 0, name: '' } } }, created() { this.fetchData() }, methods: { fetchData() { this.listLoading = true getTypeList().then(response => { this.list = response.data this.listLoading = false }) }, openAddFrom() { this.formAddVisible = true }, bindEdit(data) { this.editForm.id = data.ID this.editForm.name = data.Name this.formEditVisible = true }, DeteleType (data) {this.$confirm(' confirmButtonText ', 'confirmButtonText ', cancelButtonText:' confirmButtonText ', type: 'danger' }).then(() => { console.log(data) delType({ id: data.ID }).then(res => { this.$message({ type: 'success' message: 'successful delete'}) setTimeout (() = > {this. $router. Go (0)}, 300)})}). The catch (() = > {enclosing $message ({type: 'info', message: 'undelete'})})}, onSubmitAdd() {addType({name: this.addForm.name }).then(res => { console.log() this.$message({ type: 'success', message: }) setTimeout(() => {this.$router.go(0)}, 300)}) this.formVisible = false}, onSubmitEdit() { editType({ name: this.editForm.name, id: this.editForm.id }).then(res => { console.log() this.$message({ type: 'success', message: }) setTimeout(() => {this.$router.go(0)}, 300)}) this.formEditVisible = false}}} </script>Copy the code

Import the routing

import { getTypeList, delType, addType, editType} from '@/api/url'
Copy the code

Use is very simple, import how many routes directly in the curly braces after the route name after the method can be called

The new classification

<el-button type="primary" icon="el-icon-plus" @click="openAddFrom()">Copy the code

Using the el-Button component, type has six optional values. There is no default value. The primary parameter is used here. Default button properties. Ico attribute value is el – icon – plus the button image is a plus, there are many images, please refer to the document: https://element.eleme.cn/#/zh-CN/component/icon, belong to the roughly 280 icon. @click is a button that listens for a click on a binding tag. This is short for V-on :click. This dialog box is also a component of Element-UI:

<! Sync ="formAddVisible" width="450px" center> <el-form ref=" addForm "> <el-form-item label=" category name" >< EL-input V-model ="addForm.name" placeholder=" please input content "></el-input> </el-form-item> <el-form-item> <el-button native type="primary" @click="onSubmitAdd" </el-button> </el-form-item> </el-dialog>Copy the code

:visible.sync is used to bind a variable that uses Boolean values to control the display and hiding of dialog boxes. When we close the window, the popup is hidden and the visible value changes. However, when we close the window, we can’t determine the value by the definite action. In short, manual and other operations will control the variable. FormAddVisible is defined to be False when the page is initialized and it doesn’t show, if you click on the button it will show True, and then you fill in the information and you submit it and you change it to False, and that’s it.

This dialog box contains oneel-formThe form component, which is used by the pole componentrefThis variable is used to bind data to a page. It must be defined during page initialization, otherwise an error will be reported:

  data() {
    return {
      list: null,
      listLoading: true,
      formAddVisible: false,
      formEditVisible: false,
      addForm: {
        name: ''
      },
      editForm: {
        id: 0,
        name: ''
      }
    }
  },
Copy the code

The confirmation button also uses @click to trigger an event function. Defined in Vue’s Methods:

onSubmitAdd() { addType({ name: this.addForm.name }).then(res => { this.$message({ type: 'success', message: }) setTimeout(() => {this.$router.go(0)}, 300)}) this.formVisible = false},Copy the code

Use the addType method to request the back end interface defined in url.js, where this.$message() is also the message prompt component of Elemental-UI. There are many parameters that can do a variety of things. Let’s look at the default style:

SetTimeout () is one of the asynchronous functions that executes the specified code after the specified time, previouslythis.$router.go(0)Is the specified code. 300 is the specified time to wait

this.$router.go(0)This means refresh in place, reload data, 0 to -1 to return to the previous page, 1 to advance one page

Finally usingthis.formVisible = falseClose Windows

Modify the

Edit the code basically the same as the new, just one more ID, new classification and modify classification are called up a dialog box, modify classification click the button when get that line of data:

<el-button :loading="scope.row. Loading "type="primary" @click="bindEdit(scope.row)">Copy the code

BindEdit then has a data assignment operation in addition to the call up dialog:

  this.editForm.id = data.ID
  this.editForm.name = data.Name
Copy the code

After the assignment, the interface is invoked to retrieve the two variables in the VUE object and pass them to the back end

delete

A component called the bubble confirmation box has been added to the listener click method:

DeteleType (data) {this.$confirm(' Delete category? ', 'confirmButtonText ', {confirmButtonText:' confirm ', cancelButtonText: 'cancel ', type: 'danger' }).then(() => { console.log(data) delType({ id: data.ID }).then(res => { console.log() this.$message({ type: 'success' message: 'successful delete'}) setTimeout (() = > {this. $router. Go (0)}, 300)})}). The catch (() = > {enclosing $message ({type: 'info', message: 'undelete'})})},Copy the code

In addition to the then logic for receiving the confirm button, there is catch logic for receiving the cancel.

conclusion

Although it is very rough, it still meets the needs. The Layui framework I used in the jQuery project is similar to this one, but I feel it is more organized and quicker to learn the basic element-UI. And the Element-UI has more to learn, more styles, and more power. Next prepare to add and optimize the classification details of the add, delete, change and check.