1. ElemtnUI There are mandatory items in the form verification. If some mandatory items are not filled in, directly close the form and open the form again

Problem solving:

Add a close event to the El-Dialog to clear the form contents when the dialog closesCopy the code

  <el-dialog
        title="Add user"
        :visible.sync="addVisible"
        :close-on-press-escape="false"
        @close="addFormClose"
        width="30%">
  </el-dialog>
  ---------------------------------------------------------------------------
  methods:
  // Clear the form
  addFormClose(){
    this.$refs['addFormRef'].resetFields()
  }
Copy the code

2. An expansion item in the elementUI table whose type is expend is closed when something in the expansion item is deleted

Problem solving:

When an expanded item is deleted, we typically re-invoke the interface that fetched the entire table content, causing the current expanded item to be closed and the data content to be retrieved locallyCopy the code

closeTag(row,rightId){
    this.$confirm('This operation will permanently delete the file. Do you want to continue? '.'tip', {confirmButtonText: 'sure'.cancelButtonText: 'cancel'.type: 'warning'
}).then(() = > {
    var params = {
        roleId:row.id,
        rightId
    }
    DelRight(params).then(res= > {
        if(res.data.meta.status == 200) {this.$message({
                message:res.data.meta.msg,
                type:'success'
            })
            row.children = res.data.data  ////// Obtain data locally
            return 
       	}
        this.$message({
             message:res.data.meta.msg,
             type:'error'})})})}///// Interface to get table data
this.allRoles()
Copy the code

This.$refs[‘ XXX ‘].resetFileds() is used, but some items in the form item are still not cleared

Problem solving:

Validate any data that is in a form item, even if it is not requiredCopy the code

Align :cneter in el-table-column one by one is too troublesome

Problem solving:

Add cell-style and header-cell-style attributes to el-tableCopy the code

<el-table" style="width: 100%" :cell-style="rowClass" :header-cell-style="headClass"> ------------------------------------------------------------------------------------------------------------ methods: // Set headClass () {return 'text-align: center; Background: RGB (242242242); Color: RGB (140,138,140)'}, // set rowClass () {return 'text-align: center; '}Copy the code

5. Elementui form editing. Sometimes the input fields don’t go up and the dropdown options don’t go up

Problem solving:

Update with this.$forceUpdate()Copy the code

            <el-form-item label='Name:' prop='name'>
                <el-input v-model='editform.name' @input='change'></el-input>
            </el-form-item>
            
            <el-form-item label='Enable identity:' prop='isEnable'>
                 <el-select v-model="editform.isEnable" placeholder="Please select" @change='updateSelect'>
                    <el-option
                    v-for="item in options1"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            
  -----------------------------------------------------------------------------------
  
  methods:
      change(){
          this.$forceUpdate()
      }
      updateSelect(){
          this.$forceUpdate()
      }
            
Copy the code

6. View not rendered after add/edit/delete operation of elementUI table

Problem solving:

Use a data control in the el-table and use $nextTick()Copy the code

template:
    <el-talbe v-if='isAlive'></el-table>
    
data:
    isAlive:true
    
methods:
    reload(){
        this.isAlive = false
        this.$nextTick(() = > this.isAlive = true)}Copy the code

7. Background is POST request, but the parameters are not object form, but parameters and parameters using & connection type, the purpose of POST request is for more security

Problem solving:

Install QS and use qs.stringify() to convertCopy the code