级联选择器 静态数据样式以及bug.

[XiaoYong1995]

问题一: (静态数据)首先“添加/删除”按钮样式问题 ,经过检查发现是没有引入scss文件导致.在Home.vue文件中引入即可 引入样式后

问题二： 点击上述“添加、删除”按钮无反应，在文件RightPanel.vue中,将“on-click”改为“onClick”即可

问题三： 修复好上述问题后,引出该问题“弹出的添加框,点击确定后无法自动关闭”且点击关闭按钮无反应. 修复方法:将TreeNodeDialog.vue,的script替换为下面的即可.

<script>
import {ref} from 'vue'
import {isNumberStr} from "@/utils/index";
import {getTreeNodeId, saveTreeNodeId} from "@/utils/db";

const id = getTreeNodeId();

export default {
  components: {},
  inheritAttrs: false,
  emits: ['commit'],
  props: [],
  computed: {},
  watch: {
    // eslint-disable-next-line func-names
    "formData.value": function (val) {
      this.dataType = isNumberStr(val) ? "number" : "string";
    },
    id(val) {
      saveTreeNodeId(val);
    },
  },
  created() {
  },
  mounted() {
  },
  setup(props, context) {
    let id = ref(0);
    let formData = ref({
      label: undefined,
      value: undefined,
    });
    let rules = ref({
      label: [
        {
          required: true,
          message: "请输入选项名",
          trigger: "blur",
        },
      ],
      value: [
        {
          required: true,
          message: "请输入选项值",
          trigger: "blur",
        },
      ],
    });
    let dataType = ref("string");
    let dataTypeOptions = ref([
      {
        label: "字符串",
        value: "string",
      },
      {
        label: "数字",
        value: "number",
      },
    ]);
    const close = () => {
      context.emit("update:modelValue", false);
    }
    let elForm = ref(null);
    const handelConfirm = (isClose) => {
      elForm.value.validate((valid) => {
        if (!valid) return;
        if (dataType.value === "number") {
          formData.value.value = parseFloat(formData.value.value);
        }
        formData.value.id = id.value++;
        context.emit("commit", formData.value);
        close();
      });
    }
    const onOpen = () => {
      formData.value = {
        label: undefined,
        value: undefined,
      };
    };
    const onClose = () => {
    }
    return {
      onOpen,
      close,
      onClose,
      handelConfirm,
      elForm,
      id,
      formData,
      rules,
      dataType,
      dataTypeOptions
    }
  }
};
</script>

[yupk]

谢谢你的代码，nice！