vue 3.0 form 规则校验-----懂的都懂_vue3 setup() form 规则验证-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_44170622/article/details/121161215

该博客内容涉及Vue.js应用中使用ref管理和 reactive进行状态管理，展示了表格数据的展示和操作，包括新增、编辑和取消功能。代码示例展示了如何使用表单验证、对话框控制以及数据操作的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

查询

setup() {
const router = useRouter();
const Form = ref(null);
const state = reactive({
form: {
industryName: “”,
industryDesc: “”,
},
dialogVisible: false,
loading: false,
diaTitle: “新增行业”,
tableData: [
{
date: “2016-05-04”,
name: “Tom”,
address: “No. 189, Grove St, Los Angele”,
type: 3,
id: 333,
},
{
date: “2016-05-04”,
name: “Tom”,
address: “No. 189, Grove St, Los Angele”,
type: 4,
id: 333,
},
{
date: “2016-05-01”,
name: “Tom”,
address: “No. 189, Grove St, Los Angele”,
type: 1,
id: 444,
},
{
date: “2016-05-02”,
name: “Tom”,
address: “No. 189, Grove St, Los Angele”,
type: 2,
id: 555,
},
{
date: “2016-05-01”,
name: “Tom”,
address: “No. 189, Grove St, Los Angele”,
type: 3,
id: 666,
},
{
date: “2016-05-08”,
name: “Tom”,
address: “No. 189, Grove St, Los Angele”,
type: 2,
id: 777,
},
{
date: “2016-05-06”,
name: “Tom”,
address: “No. 189, Grove St, Los Angele”,
type: 3,
id: 888,
},
{
date: “2016-05-07”,
name: “Tom”,
address: “No. 189, Grove St, Los Angele”,
type: 2,
id: 999,
},
],
rules: {
industryName: [
{ required: “true”, message: “行业名称不为空”, trigger: “blur” }
],
},
});
onMounted(() => {});
let onSubmit = () => {
Form.value.validate((valid) => {});
};
let cancel = () => {
Form.value.resetFields();
state.dialogVisible = false;
};

let add = () => {
  state.dialogVisible = true;
};
let editdRevciver = (id) => {
  state.diaTitle = id ? "编辑行业" : "新增行业";
  state.dialogVisible = true;
};

return {
  ...toRefs(state),
  Form,
  add,
  editdRevciver,
  onSubmit,
  cancel,
};

},
};