“This is my fourth day of participating in the First Challenge 2022. For more details: First Challenge 2022.”

In the development of the project, VUE for the technology stack and Elementui for the framework met some unusual requirements during the development process. Later, I will refer to the data and finally realize the requirements. I will record them here for reviewing the past and gaining new knowledge.

The table header realizes the drop-down box

Template requires slot-scope=”{}” and slot=”header”

<el-table-column prop="mornAttendTime" label="Number of attendance" width="120" align="center">
    <template slot-scope="{}" slot="header">
        <el-select v-model="searchForm.exeId" @change="chooseExe(1)">
            <el-option v-for="item in actList" :key="item.exeId" :label="item.exeName" :value="item.exeId"></el-option>
        </el-select>
    </template>
    <template slot-scope="scope">
        {{scope.row.attendTime ? scope.row.attendTime: '--'}}
    </template>
</el-table-column>
Copy the code

2. Column input validation in the table

Rules (:rules=” formdata.rules “) and Model (formData). Each input needs to be bound with prop and rule. Verify that each column in the table is valid.

1. The HTML part

<div class="my-table">
    <el-form :rules="formData.rules" :model="formData" ref="ruleForm" class="demo-ruleForm">
        <el-table
                ref="multipleTable"
                v-loading="loading"
                :data="formData.tableData"
                :height="height"
                border
                resizable
                stripe>
            <el-table-column label="Serial number" :index="getIndexNumber" type="index" align="center" width="80" fixed="left"></el-table-column>
            <el-table-column prop="mjrName" label="Electrical Timing Results" align="center">
                <template slot-scope="scope">
                    <template v-if="scope.row.isEdit">
                        <el-form-item :prop="'tableData.' + scope.$index + '.begin'" :rules="formData.rules.begin" class="inline">
                            <el-input onkeyup="value=value.replace(/[^\d]/g,'')" min="0" maxlength="2" v-model="scope.row.begin" placeholder="Performance" class="wid60"></el-input>
                        </el-form-item> ：
                        <el-form-item :prop="'tableData.' + scope.$index + '.end'" :rules="formData.rules.end" class="inline">
                            <el-input onkeyup="value=value.replace(/^\D*(\d*(? : \ d {0, 2})?) .*$/g, '$1')" v-model="scope.row.end" placeholder="Performance" class="wid60"></el-input>
                        </el-form-item>
                    </template>
                    <template v-else>
                        {{scope.row.begin}}:{{scope.row.end}}
                    </template>
                </template>
            </el-table-column>
            <el-table-column label="Operation" align="center" fixed="right" width="120">
                <template slot-scope="scope">
                    <span class="opera-btn" @click="getDetail(scope.row.id, 1)">The editor</span>
                    <span class="opera-btn" @click="deleteOne(scope.row.id)">delete</span>
                </template>
            </el-table-column>
            <template slot="empty">
                <empty></empty>
            </template>
        </el-table>
    </el-form>
</div>
Copy the code

Part 2. Js

export default {
    data() {
        return {
            formData: {
                rules: {
                    begin: [{required: true.message: 'Score set wrong'},
                        { min: 2.max: 2.message: 'Score set wrong'.trigger: 'blur'}].end: [{required: true.message: 'Score set wrong'},
                        { min: 5.max: 5.message: 'Score set wrong'.trigger: 'blur'}],},tableData: []},}}}Copy the code

3. Form time frame cyclic verification

As shown, valid time fields in the form can be added and removed by themselves, and each one must be verified as required. Rules (:rules=”rules. Time “) :prop (:prop=”‘validTimeList.’ + index + ‘.time'”); rules (:rules=”rules

1. The HTML part

<template v-for="(item,index) in newForm.validTimeList">
    <el-form-item
        :key="index"
        :label="item.name"
        :prop="'validTimeList.' + index + '.time'"
        :rules="rules.time">
        <el-time-picker
            is-range
            format="HH:mm"
            v-model="item.time"
            range-separator="- >"
            start-placeholder="Start time"
            end-placeholder="End time"
            placeholder="Select time range"
            @input="changeTime($event,index)">
        </el-time-picker>
        <i class="icon el-icon-circle-plus-outline" @click="addTime(index)" v-if=! "" isLook"></i>
        <i class="icon el-icon-remove-outline" @click="removeTime(index)" v-if="index ! = 0 &&! isLook"></i>
    </el-form-item>
</template>
Copy the code

Part 2. Js

export default {
    data() {
        return {
            newForm: {
                validTimeList: [{
                    name: 'Valid Time:'.startValidTime: ' '.endValidTime: ' ',}],},rules: {
                time: [{required: true.message: 'Please select valid time'},],},methods: {
                 // Add a time range
                addTime(i) {
                    this.newForm.validTimeList.splice(i + 1.0, {
                        startValidTime: ' '.endValidTime: ' ',}}),// Delete a time range
                removeTime(index) {
                    this.newForm.validTimeList.splice(index, 1)},// Time range change (plugin binding is an array, the background format is required is two fields)
                changeTime(val,index) {
                    if(val && val.length > 0) {let d1 = new Date(val[0]),d2 = new Date(val[1]);
                        this.newForm.validTimeList[index].startValidTime = addZero(d1.getHours()) + ':' + addZero(d1.getMinutes());
                        this.newForm.validTimeList[index].endValidTime = addZero(d2.getHours()) + ':'+ addZero(d2.getMinutes()); }},}}}}Copy the code

Above is in the recent development of the table encountered on the realization of uncommon requirements, I hope to help the big guy in need. Write it down, review the past and learn the new!