vue+elementui新增/编辑/删除

LUNA~

已于 2023-07-06 17:57:13 修改

阅读量3.6k

点赞数

分类专栏： vue elementui 文章标签：前端 Powered by 金山文档

于 2023-03-05 19:59:43 首次发布

本文链接：https://blog.csdn.net/CMDN123456/article/details/129349352

版权

vue 同时被 2 个专栏收录

55 篇文章 1 订阅

订阅专栏

elementui

45 篇文章 0 订阅

订阅专栏

第一步：要有两个页面（一个主页面，一个form页【新增/编辑】）

第二步：分清父子页面，主页面是父，form是子

第三步：

父页面准备工作：

父页面，绑定数据，定义tableData=[],(为什么为空？因为数据是从后台获取的，通过调用查询接口)

弹框部分

子页面准备工作

第四步

新增、编辑

4.1 父页面：点击新增按钮，

4.2 接收子页面的方法，@fathernewFrom="GetCondition"，GetCondition是个方法名（上面说过了）

4.3 form页面

4.3.·1 在点击新增/编辑的时候，就调到了这边👇

created和watch里面的作用是：判断传过来的值是不是空（新增时应该是空），如果传过来的值失控，thia.newFrom={}，如果传过来的不是空（说明是编辑）就把值给this.newFrom

4.3.2 点击保存时把值传给父组件

第五步：

删除

主页面，点击删除进入这个方法，点击确定，调用删除的方法，再在方法里面的删除接口，接口调用成功后，再调用下查询的方法，刷新页面。

描述不太好，代码如下。

父页面（Sys_DicIndex.vue）

<template>
  <div class="Sys_DictIndex" style="width: 98%; height: 700px">
    <div class="main">
      <el-row :gutter="20">
        <el-col :span="3"
          ><div class="grid-content bg-purple">
            <p>基础类型</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="buttonStyle">
            <el-button size="mini" type="primary" @click="Add">新增</el-button>
            <el-button size="mini" type="success" @click="Update"
              >编辑</el-button
            >
            <el-button size="mini" type="danger" @click="Del">删除</el-button>
            <el-button size="mini" type="danger" @click="returnMain"
              >返回首页</el-button
            >
          </div>
          <div>
            <el-table
              ref="tableRef"
              :data="tableData"
              style="width: 100%; height: 645px"
              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="25%"
      center
      draggable
      destroy-on-close
    >
      <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) => {
          //新增成功之后直接掉查询的接口
          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>
::v-deep .el-button {
  float: left;
}
.buttonStyle {
  height: 39px;
}
.el-divider--vertical {
  display: inline-block;
  width: 1px;
  height: 53em;
  margin: 0 8px;
  vertical-align: middle;
  position: relative;
  border-left: 1px var(--el-border-color) var(--el-border-style);
}
.el-tree-node.is-current > .el-tree-node__content {
  background-color: red !important;
  color: #333 !important;
}
</style>

子页面（form.vue）

<template>
  <div class="userForm">
    <el-form ref="form" :form="form" @change="newFrom" label-position="left">
      <el-form-item label="类型" prop="DictID">
        //DictID 一定要与  value 的类型一致
        <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" style="width: 216px"></el-input>
      </el-form-item>
      <el-form-item label="排序">
        <el-input v-model="newFrom.DataID" style="width: 216px"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit()">确定</el-button>
        <el-button>取消</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指传给父组件
    },
  },
};
</script>
<style scoped></style>