Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

elementUIDisable multi-select function of el-table

The selectable ectable () of elementUI EL-Table can be used when selecting a table that allows only parts of the table to be selected

So we could write it this way

<el-table :data="tableData" border v-loading='loading' size="small" @selection-change="handleSelectionChange">
    <el-table-column v-if="type==='admin'" type="selection" :selectable="selectable" width="55"></el-table-column>
    <el-table-column label="State" prop="tips" width="150"></el-table-column>
</el-table>
Copy the code
selectable(row,index) {
    return row.pro_status === 'review' // Determine by a value for which line the selection box is disabled
}
Copy the code

The solution to the invalid click event of el-card

@click = 'link' is changed to @click.native = 'link'// become native bindingCopy the code

ElementUI’s date picker gets the format of the selected time, gets the timestamp, and so on

When using the date picker, we need to format the time and pass it to the back end

Like passing time stamps

value-format="timestamp"
Copy the code
<el-form-item label=" applicant's birthday "Required > <el-date-picker type="date" value-format="timestamp" placeholder=" applicant's birthday" placeholder v-model="ruleFormUser.date1" style="width: 100%;" > </el-date-picker> </el-form-item>Copy the code

For example, ‘YYYY-MM-DD’ format

value-format="yyyy-MM-dd"
Copy the code
<el-form-item label=" applicant's birthday "Required > <el-date-picker type="date" value-format=" YYYY-MM-DD" placeholder=" applicant's birthday" v-model="ruleFormUser.date1" style="width: 100%;" > </el-date-picker> </el-form-item>Copy the code

Automatic upload of el-upload with parameters

<el-form-item label=" product photo "> <el-upload class="upload-demo" action="#" multiple :limit="1" :auto-upload="true" :show-file-list='false' :file-list="fileList" :http-request="imageChange" Accept = "image/PNG image/GIF image/JPG, image/jpeg" > < el - button class = "upbtn" : loading = 'srcload' > upload pictures < / el - button > </el-upload> </el-form-item>Copy the code

FormData is used for data integration and transmission

imageChange(param,type){ let formData = new FormData() formData.append('file', param.file) formData.append("s_id", localStorage.s_id) formData.append("img_kind", 'open') this.$axios.post(`${this.$baseUrl}/image/upload`, FormData). Then (res => {if(res.data.ret){this.$message.success(' upload successfully ')}else{this.$message.error(' upload failed '+res.data.msg). }}). Catch (function (error) {this.$message.error(' failed to upload '+res.data.msg)}); },Copy the code