「这是我参与2022首次更文挑战的第4天，活动详情查看：2022首次更文挑战」。

在项目开发中，技术栈用的vue，框架用的elementui，在开发过程中遇到一些不常见的需求，后面查阅资料最终实现需求，在此记录一下，温故而知新。

一.表格头实现下拉框

template需要设置slot-scope="{}"，并且slot="header"

<el-table-column prop="mornAttendTime" label="出勤次数" 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>

二.表格中列输入验证

在表格中实现input的输入和验证，在table外面套一层form，form正常的绑定rules(:rules="formData.rules")和model(formData)， 每一个input需要绑定prop和rule，进而就可以实现在表格中验证每一列的输入是否合法了，我们一起去看看吧。

1.html部分

<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="序号" :index="getIndexNumber" type="index" align="center" width="80" fixed="left"></el-table-column>
            <el-table-column prop="mjrName" label="电计时成绩" 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="成绩" 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="成绩" 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="操作" align="center" fixed="right" width="120">
                <template slot-scope="scope">
                    <span class="opera-btn" @click="getDetail(scope.row.id, 1)">编辑</span>
                    <span class="opera-btn" @click="deleteOne(scope.row.id)">删除</span>
                </template>
            </el-table-column>
            <template slot="empty">
                <empty></empty>
            </template>
        </el-table>
    </el-form>
</div>

2.js部分

export default {
    data() {
        return {
            formData: {
                rules: {
                    begin: [
                        { required: true, message: '成绩设置有误'},
                        { min: 2, max: 2, message: '成绩设置有误', trigger: 'blur' }
                    ],
                    end: [
                        { required: true, message: '成绩设置有误'},
                        { min: 5, max: 5, message: '成绩设置有误', trigger: 'blur' }
                    ],
                },
                tableData: []
            },
        }
   }
}

三.表单时间框循环验证

如图，在表单中有效时间字段是可以自己添加和删除的，并且每一个都要验证必填。 实现的重点就是每一个时间的必填验证，需要绑定prop （:prop="'validTimeList.' + index + '.time'"）和rules（:rules="rules.time"），一起看看代码吧~

1.html部分

<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="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围"
            @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>

2.js部分

export default {
    data() {
        return {
            newForm: {
                validTimeList: [{
                    name: '有效时间：',
                    startValidTime: '',
                    endValidTime: '',
                }],
            },
            rules: {
                time: [
                   { required: true, message: '请选择有效时间'},
                ],
            },
            methods: {
                 // 添加时间段
                addTime(i) {
                    this.newForm.validTimeList.splice(i + 1, 0, {
                        startValidTime: '',
                        endValidTime: '',
                    })
                },
                // 删除时间段
                removeTime(index) {
                    this.newForm.validTimeList.splice(index, 1)
                },
                // 时间段修改 （插件绑定的是一个数组，后台需要的格式是两个字段）
                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());
                    }
                },
            }
        }
    }
}

以上就是在最近开发中遇到的关于table的不常见的需求的实现了，希望能帮助到有需要的大佬啦。 记录一下，温故而知新！