vue+elementui 增删改（假数据）

已于 2023-03-31 16:55:55 修改
阅读量1k 收藏 1
点赞数
分类专栏： vue  elementui 文章标签： vue.js elementui javascript
于 2023-03-31 16:55:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CMDN123456/article/details/129884128
版权

效果:

源码：

 1. 父组件

<template>
  <div class="userIndex">
    <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>

    <el-table
      ref="tableRef"
      :data="tableData"
      class="tableStyle"
      border
      @selection-change="newselect"
    >
      <el-table-column
        align="center"
        type="selection"
        width="80"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="UserID"
        :label="lable.UserID"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="UserName"
        :label="lable.UserName"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="LoginAccount"
        :label="lable.LoginAccount"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="Password"
        :label="lable.Password"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="RoleName.name"
        :label="lable.RoleName"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="MobileTel"
        :label="lable.MobileTel"
        min-width="100"
      ></el-table-column>

      <el-table-column
        align="center"
        prop="Company.name"
        :label="lable.Company"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="Dsc"
        :label="lable.Dsc"
        width="150"
      >
      </el-table-column>
    </el-table>
    <!-- destroy-on-close 关闭时销毁 Dialog 中的元素 -->
    <el-dialog
      :visible.sync="dialogVisible"
      :title="dialogTitle"
      destroy-on-close
      append-to-body
      class="dialogStyle"
    >
      <!-- :forms="formData" -->
      <userForm
        ref="fromViewRef"
        @fathernewFrom="GetCondition"
        @formClose="GetcloseData"
      />
    </el-dialog>
  </div>
</template>

<script>
import userForm from "./userForm.vue";
export default {
  components: {
    userForm,
  },
  data() {
    return {
      dialogVisible: false, //用于控制form表单显隐
      dialogTitle: "", //用于控制新增、编辑标题
      formData: {
        UserID: "",
        BirthDate: "",
        UserName: "",
        LoginAccount: "",
        Password: "", //
        RoleName: {
          id: "",
          name: "",
        }, //角色
        Company: {
          id: "",
          name: "",
        }, //单位
        MobileTel: "", //联系方式
        Dsc: "",
        Specialties: "", //专业
        PoliticalStatus: "", // 职称
        PartyTime: "", //入党时间
      },
      //定义对象，用于给子组件传值 —— 固定模板
      lable: {
        UserID: "序号",
        UserName: "姓名",
        LoginAccount: "账号",
        Password: "密码",
        RoleName: "角色",
        PostName: "职位",
        FixedTel: "固定电话",
        InnerTel: "内部电话",
        MobileTel: "联系方式",
        Dsc: "备注",
        Specialties: "专业",
        BirthDate: "生日",
        PoliticalStatus: "职称",
        PartyTime: "入党时间",
        Company: "单位",
      },

      tableData: [
        {
          UserID: 1,
          BirthDate: "2000-05-02",
          UserName: "王小虎",
          LoginAccount: "WangXiaohu",
          Password: "wagnxiaohu", //面貌
          RoleName: { id: 1, name: "机务人员" }, //角色
          PostName: "", //职位
          FixedTel: "", //固定电话
          InnerTel: "", //内部电话
          MobileTel: 12545876598, //移动电话
          Dsc: "",
          Specialties: "计算机", //专业
          PoliticalStatus: "", // 职称
          PartyTime: "2022-23-12", //入党时间
          Company: "", //单位
        },
        {
          UserID: 2,
          BirthDate: "2016-05-02",
          UserName: "李连杰",
          LoginAccount: "Lilianjie",
          Password: "Lilianjie", //面貌
          RoleName: { id: 1, name: "机务人员" }, //角色
          PostName: "", //职位
          FixedTel: "", //固定电话
          InnerTel: "", //内部电话
          MobileTel: 18765259865, //移动电话
          Dsc: "",
          Specialties: "计算机", //专业
          PoliticalStatus: "", // 职称
          PartyTime: "", //入党时间
          Company: "", //单位
        },
      ],
      multipleSelection: null, //勾选的值

      // inputVal: "",
    };
  },
  created() {},
  watch: {},
  mounted() {},
  methods: {
    newselect(val) {
      //selection, row
      this.multipleSelection = val;
    },
    //#region  按钮
    Add() {
      var _this = this;
      this.dialogVisible = true;
      this.dialogTitle = "新增用户";
      this.$nextTick(() => {
        _this.$refs.fromViewRef.newFrom = _this.formData;
      });
    },
    Update() {
      var _this = this;

      if (
        this.multipleSelection.length > 1 ||
        this.multipleSelection.length == 0
      ) {
        this.$message({
          message: "只能选择一条进行编辑！",
          type: "warning",
        });
      } else {
        console.log("勾选的一条==编辑===", this.multipleSelection);
        this.dialogTitle = "编辑用户";
        var objs = _this.multipleSelection[0];
        var putongObj = {};
        //获取对象值  ——  响应式对象（可观测对象） 转 普通对象
        Object.keys(objs).forEach(function (key) {
          //如果为对象，取值id
          if (typeof objs[key] === "object" && objs[key] !== null) {
            var objsss = {
              id: "",
              name: "",
            };
            objsss.id = objs[key].id;
            objsss.name = objs[key].name;

            putongObj[key] = objsss;
          } else {
            putongObj[key] = objs[key];
          }
        });
        this.$nextTick(() => {
          _this.$refs.fromViewRef.newFrom = putongObj;
        });
        // console.log(this.formData);
        // this.formData = objs;
        // console.log(this.formData);

        this.dialogVisible = true;
      }
    },
    Del() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //调用方法
          this.DeleteFormDatas(this.multipleSelection);
        })
        .catch(() => {});
    },
    //#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);
      }
    },

    GetcloseData(val) {
      this.dialogVisible = val;
    },
    //#region  新增、编辑、删除
    InsertFormDatas(data) {
      let res = {
        UserID: 2,
        BirthDate: "2016-05-02",
        UserName: "李连杰",
        LoginAccount: "lilianjie",
        Password: "lilianjie",
        RoleName: "", //角色
        PostName: "", //职位
        FixedTel: "", //固定电话
        InnerTel: "", //内部电话
        MobileTel: 12532659865, //移动电话
        Dsc: "",
        Specialties: "计算机", //专业
        PoliticalStatus: "", // 职称
        PartyTime: "", //入党时间
        Company: "", //单位
      };
      let length = this.tableData.length + 1;
      data.UserID = length;
      console.log("新增====", data);
      this.tableData.push(data);
      this.dialogVisible = false;
    },
    UpdateFormDatas(data) {
      var dataTemp = {};
      //获取对象值
      Object.keys(data).forEach(function (key) {
        //如果为对象，取值id
        if (typeof data[key] === "object" && data[key] !== null) {
          var objsss = {
            id: "",
            name: "",
          };
          objsss.id = data[key].id;
          objsss.name = data[key].name;

          dataTemp[key] = objsss;
        } else {
          dataTemp[key] = data[key];
        }
      });
      console.log("可观测对象", data);
      console.log("普通对象", dataTemp);
      console.log(
        "检查上面两个对象的区别-----------------------分割线---------------------------"
      );

      this.tableData.forEach((element) => {
        if (element.UserID == data.UserID) {
          //此方法绝对不行，因为是引用类型（对象），与值类型不一样，并且可观测对象赋值这边很麻烦，又要通过Object.defineProperty 的特定方法才能对此类型的数据赋值
          element = dataTemp;
        }
      });
      console.log("赋值后----------------");
      console.log(this.tableData);
      console.log("this.tableData =====>  绝对赋值不上去！");
      //粗暴的方式 ————————————————————————————
      this.tableData.forEach((element) => {
        if (element.UserID == data.UserID) {
          //这个方法一定是可以的，做假数据时要区别 普通对象 和 可观测对象，也可以称作为互操作对象
          //获取对象值
          Object.keys(element).forEach(function (key) {
            //如果为对象，取值id
            if (typeof element[key] === "object" && dataTemp[key] !== null) {
              element[key].id = dataTemp[key].id;
              element[key].name = dataTemp[key].name;
            } else {
              element[key] = dataTemp[key];
            }
          });
        }
      });
      console.log("赋值后----------------");
      console.log(this.tableData);
      console.log("this.tableData =====>  一定赋值上去了");

      console.log(
        "重点在于：Object.defineProperty 可观测对象，Vue2双向数据绑定的底层玩意儿，比Vue3的proxy难用"
      );

      // this.tableData[data.UserID - 1] = data;
      this.dialogVisible = false;
      this.$forceUpdate();
    },
    DeleteFormDatas(data) {
      console.log("删除===", data[0].UserID - 1);

      let ar = this.tableData.splice(data[0].UserID - 1, 1);

      //调接口
    },
    //#endregion
  },
};
</script>

<style scoped>
/*设置表头背景色、整体表格的行高*/
.userIndex ::v-deep .el-table th.el-table__cell,
.userIndex ::v-deep .el-table th {
  color: #ffffff;
  background-image: linear-gradient(358deg, #4393ff, #43bdff);
  line-height: 42px;
  padding: 0;
  margin: 0;
}

.dialogStyle ::v-deep .el-dialog {
  width: 90%;
  /* 40 */
  background: url("../../../assets/imgList/userFormBG.png") no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

.dialogStyle ::v-deep .el-dialog__header {
  padding: 12px 20px 0 20px;
}
</style>

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

子组件 (选择框用的是vant  里面的   popup )  

<template>
  <div class="userForm">
    <el-row style="padding-left: 1px">
      <!-- ref="form" :form="form" -->
      <el-form
        :inline="true"
        :model="newFrom"
      >
        <el-row>
          <el-col :span="8"><el-form-item label="姓名">
              <el-input v-model="newFrom.UserName"></el-input> </el-form-item></el-col>
          <el-col :span="8"><el-form-item label="账号">
              <el-input v-model="newFrom.LoginAccount"></el-input> </el-form-item></el-col>
          <el-col :span="8"><el-form-item label="密码">
              <el-input v-model="newFrom.Password"></el-input> </el-form-item></el-col>
        </el-row>
        <el-row>
          <el-col :span="8"><el-form-item label="角色">
              <el-input
                placeholder="点击选择"
                readonly
                @focus="inputClick('角色')"
                v-model="newFrom.RoleName.name"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="单位">
              <el-input
                placeholder="点击选择"
                v-model="newFrom.Company.name"
                readonly
                @focus="inputClick('单位')"
              ></el-input>
            </el-form-item></el-col>
          <el-col :span="8"><el-form-item label="专业">
              <el-input v-model="newFrom.Specialties"></el-input> </el-form-item></el-col>
        </el-row>
        <el-row> </el-row>
        <el-row>
          <el-col :span="8"><el-form-item label="联系方式">
              <el-input v-model="newFrom.MobileTel"></el-input> </el-form-item></el-col>
          <el-col :span="16">
            <el-form-item
              label="备注"
              style="width: 98%"
            >
              <el-input
                type="textarea"
                v-model="newFrom.Dsc"
              ></el-input> </el-form-item></el-col>
        </el-row>
      </el-form>
    </el-row>
    <el-row class="userbuttonStyle">
      <el-button
        class="bottonMargin button4"
        @click="onclose()"
      >取消</el-button>
      <el-button
        class="bottonMargin button4"
        @click="onSubmit()"
      >确定</el-button>
    </el-row>
    <van-popup
      v-model="show"
      style="width: 50%; height: 50%"
    >
      <popup
        :titles="titles"
        :Types="Types"
        @closeTan="closeTan"
        :columns="popupColumns"
        @popupValue="getpopupValue"
      />
    </van-popup>
  </div>
</template>
<script>
import popup from "../../../components/popup.vue";
export default {
  // props: ["forms"],
  data() {
    return {
      newFrom: {
        UserID: "",
        BirthDate: "",
        UserName: "",
        LoginAccount: "",
        Password: "", //
        RoleName: {
          id: "",
          name: "",
        }, //角色
        Company: {
          id: "",
          name: "",
        }, //单位
        MobileTel: "", //联系方式
        Dsc: "",
        Specialties: "", //专业
        PoliticalStatus: "", // 职称
        PartyTime: "", //入党时间
      },
      popupColumns: [], //定义
      /**下拉数据 */
      newRoleName: [
        {
          CreateTime: null,
          CreateUserID: null,
          DataID: 1,
          DataName: "机务人员",
          DelFlag: null,
          DelTime: null,
          DelUserID: null,
          DicDataID: 5,
          DictID: 3,
          Dsc: null,
          ModifyTime: null,
          ModifyUserID: null,
          SortID: 1,
        },
        {
          CreateTime: null,
          CreateUserID: null,
          DataID: 2,
          DataName: "操作人员",
          DelFlag: null,
          DelTime: null,
          DelUserID: null,
          DicDataID: 6,
          DictID: 3,
          Dsc: null,
          ModifyTime: null,
          ModifyUserID: null,
          SortID: 2,
        },
      ],
      selectCompany: [
        {
          CreateTime: null,
          CreateUserID: null,
          DataID: 1,
          DataName: "单位1",
          DelFlag: null,
          DelTime: null,
          DelUserID: null,
          DicDataID: 5,
          DictID: 3,
          Dsc: null,
          ModifyTime: null,
          ModifyUserID: null,
          SortID: 1,
        },
        {
          CreateTime: null,
          CreateUserID: null,
          DataID: 2,
          DataName: "单位2",
          DelFlag: null,
          DelTime: null,
          DelUserID: null,
          DicDataID: 6,
          DictID: 3,
          Dsc: null,
          ModifyTime: null,
          ModifyUserID: null,
          SortID: 2,
        },
      ],
      show: false,
      //选择器类型
      Types: "",
      //选择器组件title
      titles: "",
      forms: {},
    };
  },
  components: {
    popup,
  },
  created() {},

  mounted() {},
  methods: {
    //保存
    onSubmit() {
      console.log("保存this.newFrom===", this.newFrom);
      this.$emit("fathernewFrom", this.newFrom); //把this.newFrom指传给父组件
    },
    onclose() {
      this.$emit("formClose", false);
    },

    // 点击输入框弹出 ====> 字典查询
    inputClick(val) {
      if (val == "角色") {
        let res = [];
        this.newRoleName.forEach((item) => {
          res.push({
            prectName: item.DataName,
            ID: item.DataID,
            value: item.DataID,
            text: item.DataName,
          });
        });
        this.popupColumns = res;
      } else if (val == "单位") {
        let res = [];
        this.selectCompany.forEach((item) => {
          res.push({
            prectName: item.DataName,
            ID: item.DataID,
            value: item.DataID,
            text: item.DataName,
          });
        });
        this.popupColumns = res;
      }

      this.titles = "请选择" + val;
      this.Types = val; //当页面同时会使用此处时，通过Types 区分最终回传的值应回显在哪里
      this.show = true;
    },
    //从子组件接收
    getpopupValue(val, types) {
      debugger;
      if (types !== "") {
        if (types == "角色") {
          let objs = {
            id: val[0].value,
            name: val[0].text,
          };
          this.newFrom.RoleName = objs;
        } else if (types == "单位") {
          let objs = {
            id: val[0].value,
            name: val[0].text,
          };
          this.newFrom.Company = objs;
        }
      }
      this.show = false;
    },
    //点击取消，关闭弹框
    closeTan(val) {
      this.show = val;
    },
  },
};
</script>
<style scoped>
.userForm {
  width: 100%;
  height: 100%;
}

.userForm ::v-deep .el-form-item__label {
  background: linear-gradient(#43bdff, #018ff2, #4392ff);
  border-color: #00a8f6;
  color: #fff;
  width: 63px;

  border-radius: 10px;
  text-align: center;
  padding: 0;
}

/* .userForm ::v-deep .el-form--inline .el-form-item {
  width: 31%;
} */

.userForm >>> .el-date-editor.el-input {
  width: 180px;
}

.userForm ::v-deep .el-form-item {
  padding-left: 15px;
}

.userForm ::v-deep .el-form-item__content {
  padding-left: 2px;
  width: 180px;
}

.userForm ::v-deep .el-textarea {
  width: 475px;
}
</style>
<style>
@import url("../../../assets/css/userGLStyle.css");
</style>

LUNA~
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值