界面：

 源码：

1.  父组件

<template>
  <div
    class="Sys_DictIndex"
    style="width: 100%; height: 94%"
  >
    <div class="mainStyle">
      <el-row
        :gutter="6"
        style="width: 100%; height: 100%"
      >
        <el-col :span="3">
          <div
            class="grid-content bg-purple"
            style="background-color: #fff"
          >
            <p class="jbTypeStyle">基础类型</p>
            <el-tree
              :data="treeData"
              :props="defaultProps"
              @node-click="handleNodeClick"
              default-expand-all
              highlight-current
              node-key="DictID"
              :key="itemKey"
            ></el-tree>
          </div>
        </el-col>
        <!-- <el-divider direction="vertical">分割线</el-divider> -->
        <el-col :span="21">
          <div class="userbuttonStyle">
            <el-button
              class="stylebutton button1"
              @click="Add"
            >新增</el-button>
            <el-button
              class="stylebutton button2"
              @click="Update"
            >编辑</el-button>
            <el-button
              class="stylebutton button3"
              @click="Del"
            >删除</el-button>
          </div>
          <div>
            <el-table
              ref="tableRef"
              :data="tableData"
              style="width: 100%"
              border
              @select="newselect"
            >
              <el-table-column
                align="center"
                type="selection"
                width="55"
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="DataName"
                :label="lable.DataName"
              >
              </el-table-column>
              <el-table-column
                align="center"
                prop="DictIDName"
                :label="lable.DictIDName"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="DataID"
                :label="lable.DataID"
                sortable
              ></el-table-column>
            </el-table>
          </div>
        </el-col>
      </el-row>
    </div>

    <el-dialog
      :visible.sync="dialogVisible"
      :title="dialogTitle"
      width="33%"
      center
      draggable
      destroy-on-close
      append-to-body
      class="dialogStyle"
    >
      <Sys_DictForm
        ref="fromViewRef"
        :form="formData"
        @fathernewFrom="GetCondition"
      />
    </el-dialog>
  </div>
</template>

<script>
import Sys_DictForm from "./Sys_DictForm.vue";
import { API, baseUrl } from "@/API/api.js";
export default {
  components: {
    Sys_DictForm,
  },
  data() {
    return {
      dialogVisible: false, //用于控制form表单显隐
      dialogTitle: "", //用于控制新增、编辑标题
      formData: {}, //定义对象，用于给子组件传值
      selectDictIDName: "", //用于给子组件传 类型 值
      treeData: [
        {
          label: "设备状况",
          DictID: 1,
          ParentID: 0,
          Dsc: "",
          children: [],
        },
        {
          label: "任务性质",
          DictID: 2,
          ParentID: 0,
          Dsc: "",
          children: [],
        },
        {
          label: "保障机型",
          DictID: 3,
          ParentID: 0,
          Dsc: "",
          children: [],
        },
        {
          label: "保障性质",
          DictID: 4,
          ParentID: 0,
          Dsc: "",
          children: [],
        },
        {
          label: "保障任务",
          DictID: 5,
          ParentID: 0,
          Dsc: "",
          children: [],
        },
        {
          label: "装备型号",
          DictID: 6,
          ParentID: 0,
          Dsc: "",
          children: [],
        },
      ], //定义左侧树初始化
      //默认页大小
      pageSize: 20,
      pageNum: 1,
      total: 0,
      itemKey: "", //ces
      selectedDictIDs: 1, //左边树勾选的ID
      selectLabel: "设备状况", //左侧字典项名称
      defaultProps: {
        label: "label",
      },
      lable: {
        DicDataID: "序号",
        DataName: "名称",
        DictIDName: "类型",
        DataID: "排序",
      },

      tableData: [],
      multipleSelection: [], //表格勾选的值
    };
  },
  created() {
    //初始化设置
    //1.获取字典明细列表

    const param = {
      DictID: this.selectedDictIDs,
    };
    // this.GetDataFenYe(param);
  },
  mounted() {
    // this.getTableData();
  },
  methods: {
    //获取点击左侧树的数据
    handleNodeClick(data) {
      // data.DictID  点左侧树的时候掉查询方法 设备状况 label
      this.selectedDictIDs = data.DictID;
      this.selectLabel = data.label;
      console.log("点击树的时候===", data);
      let param = { DictID: this.selectedDictIDs };
      this.GetDataFenYe(param);  //调用方法
    },

    newselect(selection, row) {
      // debugger
      // console.log("勾选出来的值== selection=",selection);
      console.log("勾选出来的值== row=", row);
      this.multipleSelection = row;
    },
    //#region  按钮
    Add() {
      this.dialogTitle = "新增";
      this.selectDictIDName = this.selectLabel;
      this.formData = {};
      this.dialogVisible = true;
    },
    Update() {
      this.formData = this.multipleSelection;
      this.dialogTitle = "编辑";
      this.dialogVisible = true;
    },
    Del() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //调用方法
          this.DeleteFormDatas(this.multipleSelection);
        })
        .catch(() => {});
    },
    //返回首页
    returnMain() {
      this.$router.push("/mainIndex");
    },
    //#endregion

    //获取表单组件传递的信息，此处接收的表单乃是数据表格对应的表单
    GetCondition(datas) {
      console.log("获取form表单传过来的数据=====：", datas);
      const param = datas;
      //获取表单组件后，判断是新增/修改
      if (this.dialogTitle.search("新增") != -1) {
        console.log("this.param=====", param);
        //调用新增方法
        this.InsertFormDatas(param);
      }
      if (this.dialogTitle.search("编辑") != -1) {
        this.UpdateFormDatas(param);
      }
    },

    //#region  新增、编辑、删除
    InsertFormDatas(data) {
      console.log("新增====", data);
      API.DicInsertData(data)  //调接口
        .then((res) => {      //res :值
          //新增成功之后直接掉查询的接口
          let param = { DictID: this.selectedDictIDs };
          this.GetDataFenYe(param);   //调用查询的方法
        })
        .catch((err) => {});

      this.dialogVisible = false;
    },

    UpdateFormDatas(data) {
      debugger;
      this.dialogVisible = false;
      console.log("编辑==dd=", data);
      API.DicUpdateData(data)
        .then((res) => {
          //新增成功之后直接掉查询的接口
          let param = { DictID: this.selectedDictIDs };
          this.GetDataFenYe(param);
        })
        .catch((err) => {});
    },
    DeleteFormDatas(data) {
      debugger;
      console.log("删除===", data);
      API.DicDelData(data)
        .then((res) => {
          let param = { DictID: this.selectedDictIDs };
          this.GetDataFenYe(param);
        })
        .catch((err) => {});
      // let ar = this.tableData.splice(data.DicDataID - 1, 1);

      // this.tableData=ar;
      // console.log("ar的值==",this.tableData);
      //调接口
    },
    //#endregion

    //查询右侧分页数据
    GetDataFenYe(param) {
      API.GetDictNameById(param)
        .then((res) => {
          //组件渲染
          console.log("查询数据", res.data.Data);
          let newTabelData = [];
          res.data.Data.lstSubset.forEach((item) => {
            newTabelData.push({
              DicDataID: item.DicDataID, //字典Id
              DataName: item.DataName, //字典名称
              DataID: item.DataID, //字典名称
              DictID: item.DictID,
              DictIDName: this.selectLabel,
              Dsc: item.Dsc,
              SortID: item.SortID,
              CreateUserID: item.CreateUserID,
              CreateTime: item.CreateTime,
              ModifyUserID: item.ModifyUserID,
              ModifyTime: item.ModifyTime,
              DelFlag: item.DelFlag,
              DelUserID: item.DelUserID,
              DelTime: item.DelTime,
            });
          });
          this.tableData = newTabelData;
          console.log("最新的tabledata=====", this.tableData);
        })
        .catch((err) => {
          // this.$notify.error({
          //   title: "消息提示",
          //   message: err,
          // });
        });
    },
    //#region  测试
    /**
     * 将TreeDatas绑定的值重新赋值
     * @param {*} GetDataLists
     */
    SetTreeDatas(GetDataLists) {
      //重新渲染，itemKey用于处理Table不渲染的问题
      this.itemKey = Math.random();
      debugger;
      this.treeData = GetDataLists;
      //Tree 树形中 label 标定字段
      labels = GetDataLists[0].sign;
      // this.treeids = GetDataLists[0].DictID;

      //标定
      this.defaultProps.label = GetDataLists[0].sign;
      // this.loading = false;
    },
    //#endregion
  },
};
</script>

<style scoped>
.jbTypeStyle {
  background: linear-gradient(#00b7f9, #018ff2, #0165eb);
  color: #fff;
  height: 24px;
  border-radius: 5px;
}

/**表格表头背景色 */
.Sys_DictIndex ::v-deep .el-table th,
::v-deep .el-table thead.is-group th.el-table__cell {
  background: linear-gradient(147deg, #70c0ff, #2f9fff);
  color: #fff;
  padding: 0;
  margin: 0;
}

.mainStyle {
  height: 100%;
  padding: 0 2%;
}

.Sys_DictIndex ::v-deep .el-tree-node {
  height: 40px;
}

/**选中节点，背景色 */
.Sys_DictIndex
  ::v-deep
  .el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
  background-color: #ecf1ff;
  color: #4977fc;
  border-radius: 5px;
}

/**添加form 表单背景色 */
.dialogStyle >>> .el-dialog {
  background: url("../../assets/imgList/userFormBG.png") no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

/* 设置form标题 */
/* .dialogStyle ::v-deep .el-dialog__header {
  padding: 4%;
} */
</style>

<style>
@import url("../../assets/css/userGLStyle.css");
</style>

2. 子组件

<template>
  <div class="DictForm">
    <el-form
      ref="form"
      :form="form"
      @change="newFrom"
      style="padding-left: 7px"
    >
      <el-form-item label="类型">
        <el-select
          v-model="newFrom.DictID"
          placeholder="请选择类型"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="名称">
        <el-input v-model="newFrom.DataName"></el-input>
      </el-form-item>
      <el-form-item label="排序">
        <el-input v-model="newFrom.DataID"></el-input>
      </el-form-item>
      <el-form-item class="bottonStyle">
        <el-button @click="onclose()">取消</el-button>
        <el-button
          type="primary"
          @click="onSubmit()"
        >确定</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  props: {
    form: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      newFrom: {
        DataName: "",
        DictID: "",
        DataID: "",
        Dsc: "",
        SortID: "",
        CreateUserID: "",
        CreateTime: "",
        ModifyUserID: "",
        ModifyTime: "",
        DelFlag: "",
        DelUserID: "",
        DelTime: "",
      },
      options: [
        {
          value: "1",
          label: "设备状况",
        },
        {
          value: "2",
          label: "任务性质",
        },
        {
          value: "3",
          label: "保障机型",
        },
        {
          value: "4",
          label: "保障性质",
        },
        {
          value: "5",
          label: "保障任务",
        },
        {
          value: "6",
          label: "装备型号",
        },
      ],
    };
  },
  created() {
    if (JSON.stringify(this.form) == "{}") {
      this.newFrom = [];
    } else {
      this.newFrom = this.form;
    }
  },
  watch: {
    form(newVal, oldVal) {
      if (newVal && newVal.length == 0) {
        this.newFrom = {};
      } else {
        this.newFrom = newVal;
      }
    },
  },
  mounted() {
    console.log("接受父组件的值==form=====", this.form);
  },

  methods: {
    //保存
    onSubmit() {
      console.log("保存this.newFrom===", this.newFrom);
      this.$emit("fathernewFrom", this.newFrom); //把this.newFrom指传给父组件
    },
    onclose() {
      this.$emit("closeData", false);
    },
  },
};
</script>
<style scoped>
.bottonMargin {
  width: 14%;
  color: #fff;
}
.DictForm ::v-deep .el-form-item__label {
  background: linear-gradient(#43bdff, #018ff2, #4392ff);

  color: #fff;
  width: 60px;
  border-radius: 10px;
  text-align: center;
  padding: 0;
}
.DictForm ::v-deep .el-input {
  width: 202px;
}
</style>

备注：记录自己写的，如有写的不对的请提出来，谢谢。