已输入数据却显示不能为空，表单校验问题（也可能是表单的问题）
如图，已输入数据却显示不能为空
论坛上相关问题搜索过，方法基本都试过，还是解决不了
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleEdit(scope.row)"
v-hasPermi="['system:team']"
>队员分配</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['system:team:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['system:team:remove']"
>删除</el-button>
<!-- 添加或修改编辑队伍人员对话框 -->
<el-dialog :title="title" :visible.sync="edit" width="500px" append-to-body>
<el-form ref="form1" :model="form1" :rules="rules1" label-width="80px">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="lineAdd"
>新增</el-button>
</el-col>
<table v-for="(form1, index) in editpeopleList" :key="index">
<el-form-item label="姓名" prop="name">
<el-input v-model="form1.name" placeholder="请输入" />
</el-form-item>
<el-form-item label="电话" prop="peoplephone">
<el-input v-model="form1.peoplephone" placeholder="请输入" />
</el-form-item>
<el-form-item label="岗位" prop="position">
<el-select v-model="form1.position" placeholder="请选择">
<el-option
v-for="dict in dict.type.position"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="deleteRow(index)"
v-hasPermi="['system:team:remove']"
>删除</el-button>
</table>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button :loading="buttonLoading1" type="primary" @click="submitEdit">确 定</el-button>
<el-button @click="cancel1">取 消</el-button>
</div>
</el-dialog>
</template>
</el-table-column>
</el-table>
</div>
</template>
<!-- 添加或修改team对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="队伍名称" prop="teamname">
<el-input v-model="form.teamname" placeholder="请输入队伍名称" />
</el-form-item>
<el-form-item label="所在地区" prop="address">
<el-select v-model="form.address" placeholder="请选择所在地区">
<el-option
v-for="dict in dict.type.area"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="队长姓名" prop="leader">
<el-input v-model="form.leader" placeholder="请输入队长姓名" />
</el-form-item>
<el-form-item label="联系电话" prop="phone">
<el-input v-model="form.phone" placeholder="请输入联系电话" />
</el-form-item>
<el-form-item label="负责区域" prop="city">
<el-select v-model="form.city" placeholder="请选择负责区域">
<el-option
v-for="dict in dict.type.city"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="状态" prop="situation">
<el-select v-model="form.situation" placeholder="请选择状态">
<el-option
v-for="dict in dict.type.situation"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="牵头总队" prop="leaderteam">
<el-select v-model="form.leaderteam" placeholder="请选择牵头总队">
<el-option
v-for="dict in dict.type.is_leaderteam"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<script>
import { listTeam, getTeam, delTeam, addTeam, updateTeam } from "@/api/system/team";
import editpeople from "@/views/system/editpeople/index.vue";
import { listEditpeople, getEditpeople, delEditpeople, addEditpeople, updateEditpeople } from "@/api/system/editpeople";
import Editpeople from "@/views/system/editpeople/index.vue";
export default {
name: "Team",
computed: {
editpeople() {
return editpeople
}
},
dicts: ['situation', 'city', 'is_leaderteam', 'area','position'],
data() {
return {
edit: false,
// 按钮loading
buttonLoading: false,
buttonLoading1: false,
// 遮罩层
loading: true,
loading1: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// team表格数据
teamList: [],
editpeopleList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
teamname: undefined,
address: undefined,
leader: undefined,
phone: undefined,
city: undefined,
situation: undefined,
leaderteam: undefined,
id:undefined,
},
queryParams1:{
name: undefined,
peoplephone: undefined,
position: undefined,
id:undefined,
teamname: undefined,
},
// 表单参数
form: {},
form1: {},
// 表单校验
rules: {
id: [
{required: true, message: "编号不能为空", trigger: "blur"}
],
teamname: [
{required: true, message: "队伍名称不能为空", trigger: "blur"}
],
address: [
{required: true, message: "所在地区不能为空", trigger: "change"}
],
leader: [
{required: true, message: "队长姓名不能为空", trigger: "blur"}
],
phone: [
{required: true, message: "联系电话不能为空", trigger: "blur"}
],
city: [
{required: true, message: "负责区域不能为空", trigger: "change"}
],
situation: [
{required: true, message: "状态不能为空", trigger: "change"}
],
leaderteam: [
{required: true, message: "牵头总队不能为空", trigger: "change"}
],
},
// 表单校验
rules1: {
name: [
{required: true, message: "姓名不能为空", trigger: "blur"}
],
peoplephone:
[
{required: true, message: "电话不能为空", trigger: "blur"}
],
position:
[
{required: true, message: "岗位不能为空", trigger: "change"}
],
}
}
;
},
created() {
this.getList();
this.getEditList();
this.form1={
name:null,
peoplephone:null,
position:null,
}
},
methods: {
/** 查询team列表 */
getList() {
this.loading = true;
listTeam(this.queryParams).then(response => {
this.teamList = response.rows;
this.total = response.total;
this.loading = false;
});
},
getEditList() {
this.loading1 = true;
listEditpeople(this.queryParams1).then(response => {
this.editpeopleList = response.rows;
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
cancel1() {
this.edit = false;
this.reset1();
},
// 表单重置
reset() {
this.form = {
id: undefined,
teamname: undefined,
address: undefined,
leader: undefined,
phone: undefined,
city: undefined,
situation: undefined,
leaderteam: undefined,
createBy: undefined,
createTime: undefined,
updateBy: undefined,
updateTime: undefined,
};
this.resetForm("form");
},
reset1(){
this.form1={
name:undefined,
peoplephone:undefined,
position:undefined,
teamname: undefined,
id: undefined,
};
this.resetForm("form1");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length !== 1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加team";
},
// 删除指定行
deleteRow(index) {
this.editpeopleList.splice(index, 1);
},
/** 添加记录按钮操作 */
/**
* 新增<前端假新增>
*/
lineAdd() {
this.editpeopleList.push(
{
name:'',
peoplephone:'',
position:'',
}
)
},
/**
* 删除<前端假删除>
* @param index 当前点击元素索引
*/
/** 修改按钮操作 */
handleUpdate(row) {
this.loading = true;
this.reset();
const id = row.id || this.ids
getTeam(id).then(response => {
this.loading = false;
this.form = response.data;
this.open = true;
this.title = "修改team";
});
},
/** 分配队员按钮操作 */
handleEdit(row) {
this.row=row;
this .queryParams1.pageNum = 1;
this.loading1= true;
this.queryParams1.teamname = row.teamname;
listEditpeople(this.queryParams1).then(response => {
this.editpeopleList = response.rows;
this.total = response.total;
this.loading1= false;
this.edit = true;
this.title = "编辑队伍人员";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
if (valid) {
this.buttonLoading = true;
if (this.form.id != null) {
updateTeam(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
}).finally(() => {
this.buttonLoading = false;
});
}
}
});
},
/** 提交按钮 */
submitEdit() {
this.$refs["form1"].validate(valid => {
if (valid) {
this.buttonLoading1 = true;
updateEditpeople(this.form1).then(response => {
this.$modal.msgSuccess("修改成功");
this.edit = false;
this.getEditList();
}).finally(() => {
this.buttonLoading = false;
});
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$modal.confirm('是否确认删除team编号为"' + ids + '"的数据项？').then(() => {
this.loading = true;
return delTeam(ids);
}).then(() => {
this.loading = false;
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {
}).finally(() => {
this.loading = false;
});
},
/** 导出按钮操作 */
handleExport() {
this.download('system/team/export', {
...this.queryParams
}, `team_${new Date().getTime()}.xlsx`)
}
}
};
</script>
rules怎么写的，贴出来看看
参考一下这里的代码：
https://element.eleme.io/#/zh-CN/component/form#biao-dan-yan-zheng
我试了一下
<el-form ref="form1" :model="form1" :rules="rules1" label-width="80px">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="lineAdd"
>新增</el-button>
</el-col>
<table v-for="(form1, index) in editpeopleList" :key="index">
<el-form-item label="姓名" prop="name">
<el-input v-model="form1.name" placeholder="请输入" />
</el-form-item>
<el-form-item label="电话" prop="peoplephone">
<el-input v-model="form1.peoplephone" placeholder="请输入" />
</el-form-item>
<el-form-item label="岗位" prop="position">
<el-select v-model="form1.position" placeholder="请选择">
</el-form-item>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="deleteRow(index)"
v-hasPermi="['system:team:remove']"
>删除</el-button>
</table>
</el-form>
data
rules1: {
name: [
{required: true, message: "姓名不能为空", trigger: "blur"}
],
peoplephone:
[
{required: true, message: "电话不能为空", trigger: "blur"}
],
position:
[
{required: true, message: "岗位不能为空", trigger: "change"}
],
},
form1:{}
【以下回答由 GPT 生成】
我会尽力回答你的问题。请告诉我具体是什么问题，我将尽快给你答复。
【相关推荐】
- 你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7674549
- 这篇博客也不错, 你可以看下输入一个括号字符串，判断其是否合法，包括左右字符串数量相等，合法括号串表示字符串中全是括号,并且左右括号数量相等
- 您还可以看一下 李月喜老师的企业微信开发第三方应用开发篇课程中的 解决方案录入，应用搜索可见，应用上架概述小节, 巩固相关知识点
- 除此之外, 这篇博客: 仿淘宝购物车实现功能：滚动页面到【结算操作】不可视时，浏览器底部出现固定栏中的 最近在做一个电商平台，做到购物车的时候，就脑洞大开要模仿淘宝实现一个非常人性化的用户体验性效果。觉得很不错，非常好玩就很大家分享了。 部分也许能够解决你的问题。
如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^