文章介绍了如何在Vue.js应用中创建一个动态的打卡管理表单，使用表格来配置多个打卡时间，并根据开启/关闭打卡的状态启用或禁用输入字段。在提交时，对开启打卡的数据进行校验，确保信息完整。代码示例展示了如何结合el-form、el-table和el-switch等组件实现这一功能。
业务需求：项目需要设置一个打卡管理，配置打卡时间（可能是多个，不确定，因此不打算直接用form-item，直接使用table，设置一个模板后，根据需求进行添加或删除）。
如上图，开启打卡后，需要对前面几项进行填写，关闭则禁用，提交后，需要对开启打卡的数据进行校验。 代码如下：
<el-form :model="form" ref="form" :rules="rules" label-width="120px">
<el-row>
<el-col :span="6">
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name" placeholder="请输入姓名"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="性别" prop="sex">
<el-select v-model="form.sex" placeholder="请选择性别">
<el-option
v-for="item in sexList"
:key="item.value"
:label="item.name"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="出生日期" prop="birthdate">
<el-date-picker
v-model="form.birthdate"
type="date"
placeholder="选择出生日期"
value-format="yyyy-MM-dd"
format="yyyy-MM-dd"
>
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="是否开启打卡">
<el-switch v-model="form.isOpen"></el-switch>
</el-form-item>
</el-col>
</el-row>
<el-table :data="form.template" style="width: 100%" v-if="form.isOpen">
<el-table-column
prop="title"
align="center"
width="80px"
:show-overflow-tooltip="true"
>
</el-table-column>
<el-table-column
label="打卡时间"
prop="time"
align="center"
width="400px"
:show-overflow-tooltip="true"
>
<template slot-scope="scope">
<el-form-item
:prop="
!scope.row.isUse ? '' : 'template.' + scope.$index + '.time'
"
label-width="0"
:rules="!scope.row.isUse ? {} : rules.time"
>
<el-time-picker
is-range
v-model="scope.row.time"
:disabled="!scope.row.isUse"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
placeholder="选择时间范围"
value-format="HH:mm:ss"
format="HH:mm:ss"
>
</el-time-picker>
</el-form-item>
</template>
</el-table-column>
<el-table-column
label="最早打卡时间"
prop="start"
align="center"
:show-overflow-tooltip="true"
>
<template slot-scope="scope">
<!-- 通过当前的scope.row.isUse（开关）控制校验的规则和校验的字段 -->
<el-form-item
:prop="
!scope.row.isUse ? '' : 'template.' + scope.$index + '.start'
"
label-width="0"
:rules="!scope.row.isUse ? {} : rules.start"
>
<el-time-picker
v-model="scope.row.start"
:disabled="!scope.row.isUse"
placeholder="选择时间范围"
value-format="HH:mm:ss"
format="HH:mm:ss"
>
</el-time-picker>
</el-form-item>
</template>
</el-table-column>
<el-table-column
label="最晚打卡时间"
prop="last"
align="center"
:show-overflow-tooltip="true"
>
<template slot-scope="scope">
<el-form-item
:prop="
!scope.row.isUse ? '' : 'template.' + scope.$index + '.last'
"
label-width="0"
:rules="!scope.row.isUse ? {} : rules.last"
>
<el-time-picker
v-model="scope.row.last"
:disabled="!scope.row.isUse"
placeholder="选择时间范围"
value-format="HH:mm:ss"
format="HH:mm:ss"
>
</el-time-picker>
</el-form-item>
</template>
</el-table-column>
<el-table-column
label="是否开启打卡"
prop="isUse"
align="center"
:show-overflow-tooltip="true"
>
<template slot-scope="scope">
<el-form-item prop="isUse" label-width="0">
<el-switch v-model="scope.row.isUse"> </el-switch>
</el-form-item>
</template>
</el-table-column>
</el-table>
</el-form>
<div style="display:flex;justify-content:center;margin-top:20px;">
<el-button @click="submitForm('form')">提交</el-button>
</div>
JS代码：
<script>
export default {
data() {
return {
form: {
name: "123",
sex: "1",
birthdate: "1",
isOpen: false,
template: [],
},
sexList: [
{ name: "男", value: "1" },
{ name: "女", value: "2" },
{ name: "未知", value: "-1" },
],
// 模板数据
defaultTable: [
{ title: "开始时间", time: "", start: "", last: "", isUse: true },
{ title: "截止时间", time: "", start: "", last: "", isUse: true },
],
// 表格数据的校验
rules: {
name: {
required: true,
message: "请输入名字",
tirgger: ["blur", "change"],
},
sex: {
required: true,
message: "请选择性别",
tirgger: ["blur", "change"],
},
birthdate: {
required: true,
message: "请选择出生日期",
tirgger: ["blur", "change"],
},
time: {
required: true,
type: "array",
message: "打卡时间不能为空",
tirgger: ["blur", "change"],
},
start: {
required: true,
type: "string",
message: "最早打卡时间不能为空",
tirgger: ["blur", "change"],
},
last: {
required: true,
message: "最晚打卡时间不能为空",
tirgger: ["blur", "change"],
},
},
};
},
mounted() {
this.init();
},
methods: {
// 初始化后，把默认模板添加的form的template中 如果需要配置多个，可以在添加个增加或减少事件，对form的template 进行push和splice事件
init() {
this.form.template.push(...this.defaultTable);
},
submitForm(form) {
console.log(this.form);
this.$refs[form].validate((valid) => {
if (valid) {
console.log("校验通过");
} else {
console.log("校验失败");
}
});
},
},
};
</script>
当然，以上只是一种写法，还有一种是给每项新增一个判断，默认是span之类的不可修改标签，点击之后，切换成input或者其他可修改的标签，进行操作。当点击其他位置后，恢复成span之类的不可修改标签。
个人记录。
扫一扫
7088
到【灌水乐园】发言
