html代码

<el-form ref="ruleFormRef" :model="dialogForm" :rules="rules" label-width="80px">
				<el-row>
					<el-col :span="12">
						<el-form-item label="角色名称" prop="roleName">
							<el-input v-model="dialogForm.roleName" placeholder="请输入角色名称" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="菜单权限">
							<el-checkbox v-model="isExpand" @change="expandBtn" label="展开/折叠" size="large" />
							<el-checkbox v-model="isAllselect" @change="allSelectBtn" label="全选/全不选" size="large" />
							<el-checkbox v-model="isParentchildLinkage" label="父子联动" size="large" />
						</el-form-item>
					</el-col>

                                               <el-col :span="24">
						<el-form-item label="">
							<el-tree
								style="width: 100%"
								ref="treeRef"
								:data="roleTreedata"
								show-checkbox
								:expand-on-click-node="false"
								:check-strictly="!isParentchildLinkage"
								:props="defaultProps"
								node-key="id"
							/>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>

js代码

import type { FormInstance, FormRules } from "element-plus";
const initDialogForm = () => {
	return {
		logValue: "",
		menuIdList: [],
		operateBy: "",
		remarks: "",
		roleKey: "",
		roleName: "",
		sortNum: 0,
		status: 0,
		sysCode: ""
	};
};
const isExpand = ref<boolean>(false);
const isAllselect = ref<boolean>(false);
const isParentchildLinkage = ref<boolean>(true);

const state = reactive({
	formData: initFormData(),
	dialogForm: initDialogForm(),
	tableData: [] as any,
	listQuery: {
		pageSize: 10,
		currentPage: 1,
		total: 0
	},
	dialogVisible: false
});
const { formData, tableData, listQuery, dialogVisible, dialogForm } = toRefs(state);
const rules = reactive<FormRules>({
	roleName: [
		{ required: true, message: "用户登录名不能为空", trigger: "blur" }
		// { min: 3, max: 30, message: "长度在 3 到 30 个字符", trigger: "blur" }
	],
	remarks: [{ max: 200, message: "最大长度 200 个字符", trigger: "blur" }]
});
const allSelectBtn = (checked: boolean) => {
	treeRef.value!.setCheckedNodes(checked ? roleTreedata.value : []);
};

const ruleFormRef = ref<FormInstance>();
const submitForm = async () => {
	const menuIdList = treeRef.value!.store.getCheckedNodes().map(node => {
		return node.id;
	});
	if (!ruleFormRef.value) return;
	await ruleFormRef.value.validate((valid, fields) => {
		if (valid) {
			const params = {
				...state.dialogForm,
				sysCode: sessionStorage.getItem("targetSysCode") as string,
				roleId: editRoleId.value,
				menuIdList
			};
			(edit.value ? roleAdd(params) : roleEdit(params))
				.then((res: any) => {
					ElMessage({
						type: "success",
						message: res.msg
					});
				})
				.finally(() => {
					state.dialogVisible = false;
					initList();
				});
		} else {
			console.log("error submit!", fields);
		}
	});
};