[JavaScript知识库]Vue增删改查秒上手！！

Vue增删改查

查询

<template>
  <div id="admin">
      <div class="header">
        <!-- 搜索 -->
        <el-input
          class="search"
          v-model="input"
          prefix-icon="el-icon-search"
          @change="search"
        />
      </div>
      <!-- 主体部分 -->
      <div class="main">
        <el-table :data="tableData">
          <el-table-column prop="id" label="编号" width="140">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="120">
          </el-table-column>
          <el-table-column prop="age" label="年龄"> </el-table-column>
          <el-table-column prop="job" label="职业"> </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                icon="el-icon-tickets"
                class="edit"
                circle
                @click="editIn(scope.row)"
              />
              <el-button
                icon="el-icon-delete"
                class="delete"
                circle
                @click="deleteIt(scope.row.id, scope.$index)"
              />
            </template>
          </el-table-column>
        </el-table>
      </div>
</template>
<script>
export default {
  data() {
    return {
      input: "",
      searchData: [],
      tableData: [
        { id: 101, name: "wxy", age: 19, job: "teacher" },
        { id: 102, name: "lxy", age: 19, job: "teacher" },
        { id: 103, name: "zxy", age: 19, job: "teacher" },
        { id: 104, name: "hxy", age: 19, job: "teacher" },
        { id: 105, name: "wxy", age: 19, job: "teacher" },
      ],
    };
  },
  methods: {
    // 退出
    exit() {
      this.$router.push("/");
    },
    // 查询
    search() {
      this.tableData = this.searchData;//将备份数据数值给渲染数据
      var data = [];//声明空数组用来筛选结果
      this.tableData.forEach((val) => {
        if (val.name.includes(this.input)) {//筛选符合条件的数据
          data.push(val);//将符合条件的数据存储到data
        }
      });
      this.tableData = data;//将data赋值给渲染数据
    },
  },

  //生命周期?-?挂载完成（可以访问DOM元素）
  mounted() {
    this.searchData = JSON.parse(JSON.stringify(this.tableData))//深拷贝
  },
};
</script>

增加

table组件

<template>
  <div id="admin">
      <div class="header">
        <!-- 搜索 -->
        <el-input
          class="search"
          v-model="input"
          prefix-icon="el-icon-search"
          @change="search"
        />
        <!-- 图标栏目 -->
        <div class="icons">
          <!-- 查看基本信息 -->
          <i class="el-icon-user-solid"></i>
          <!-- 修改密码 -->
          <i class="el-icon-setting"></i>
          <!-- 退出 -->
          <i class="el-icon-right" @click="exit"></i>
          <!-- 账户区域 -->
          <span>wxy</span>
          <img src="@/assets/logo/girl.jpg" @click="inMessage" />
        </div>
      </div>
      <!-- 主体部分 -->
      <div class="main">
        <el-table :data="tableData">
          <el-table-column prop="id" label="编号" width="140">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="120">
          </el-table-column>
          <el-table-column prop="age" label="年龄"> </el-table-column>
          <el-table-column prop="job" label="职业"> </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                icon="el-icon-tickets"
                class="edit"
                circle
                @click="editIn(scope.row)"
              />
              <el-button
                icon="el-icon-delete"
                class="delete"
                circle
                @click="deleteIt(scope.row.id, scope.$index)"
              />
            </template>
          </el-table-column>
        </el-table>
        <router-view
          :currentData="currentData"
          @getFather="getFather"
          @getAddSon="getAddSon"
        ></router-view>
      </div>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 101, name: "wxy", age: 19, job: "teacher" },
        { id: 102, name: "lxy", age: 19, job: "teacher" },
        { id: 103, name: "zxy", age: 19, job: "teacher" },
        { id: 104, name: "hxy", age: 19, job: "teacher" },
        { id: 105, name: "wxy", age: 19, job: "teacher" },
      ],
      addData: {},
    };
  },
  methods: {
    // 退出
    exit() {
      this.$router.push("/");
    },
    // 获取到子组件传递过来的值
    getFather(sonData) {
      this.tableData.forEach((val, index) => {
        if (val.id === sonData.id) {
          // 响应式渲染组件
          this.$set(this.tableData, index, sonData);
        }
      });
    },
    // 获取添加数据
    getAddSon(addData) {
      this.tableData.push(addData);
    }
  },
};
</script>

添加组件

<template>
  <!-- <el-dialog> -->
  <div class="addDialog">
    <h3 class="title">添加信息</h3>
    <el-form ref="form" :data="addForm" label-width="70px">
      <el-form-item label="id"
        ><el-input v-model="addForm.id"></el-input
      ></el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="addForm.name"></el-input>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model="addForm.age"></el-input>
      </el-form-item>
      <el-form-item label="职业"
        ><el-input v-model="addForm.job"></el-input>
      </el-form-item>
      <el-form-item class="operation">
        <el-button class="ok" type="primary" @click="onSubmit()"
          >确认</el-button
        >
        <el-button class="exit" @click="exit">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
  <script>
export default {
  data() {
    return {
      addForm: {
        id: "",
        name: "",
        age: "",
        job: "",
      },
    };
  },

  methods: {
    onSubmit() {
      this.$emit("getAddSon", this.addForm);
      this.$router.push("/admin");
    },
    exit() {
      this.$router.go(-1);
    },
  },
  //生命周期?-?创建完成（可以访问当前this实例）
  created() {
    //this.form = JSON.parse(JSON.stringify(this.currentData));
  },
};
</script>

删除

<template>
  <div id="admin">
      <!-- 主体部分 -->
      <div class="main">
        <el-table :data="tableData">
          <el-table-column prop="id" label="编号" width="140">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="120">
          </el-table-column>
          <el-table-column prop="age" label="年龄"> </el-table-column>
          <el-table-column prop="job" label="职业"> </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                icon="el-icon-delete"
                class="delete"
                circle
                @click="deleteIt(scope.row.id, scope.$index)"
              />
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      index: "",   
      tableData: [
        { id: 101, name: "wxy", age: 19, job: "teacher" },
        { id: 102, name: "lxy", age: 19, job: "teacher" },
        { id: 103, name: "zxy", age: 19, job: "teacher" },
        { id: 104, name: "hxy", age: 19, job: "teacher" },
        { id: 105, name: "wxy", age: 19, job: "teacher" },
      ],
    };
  },
  methods: {
    // 删除
    deleteIt(id, index) {
      console.log(id, index);
      let r = confirm("确定删除吗");
      if (r) {
        let i = this.tableData.findIndex((item) => {
          return item.id === id;
        });
        this.tableData.splice(i, 1);//i是索引，1删除一个
        alert("删除成功");
      } else {
        alert("删除失败");
      }
    },
   
  },
};
</script>

编辑

表格组件

<template>
  <div id="admin">
      <!-- 主体部分 -->
      <div class="main">
        <el-table :data="tableData">
          <el-table-column prop="id" label="编号" width="140">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="120">
          </el-table-column>
          <el-table-column prop="age" label="年龄"> </el-table-column>
          <el-table-column prop="job" label="职业"> </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                icon="el-icon-tickets"
                class="edit"
                circle
                @click="editIn(scope.row)"
              />
              <el-button
                icon="el-icon-delete"
                class="delete"
                circle
                @click="deleteIt(scope.row.id, scope.$index)"
              />
            </template>
          </el-table-column>
        </el-table>
        <router-view
          :currentData="currentData"//向子组件传递数值
          @getFather="getFather"//接受子组件传递的值
          @getAddSon="getAddSon"
        ></router-view>
        <!-- <router-view></router-view> -->
      </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        { id: 101, name: "wxy", age: 19, job: "teacher" },
        { id: 102, name: "lxy", age: 19, job: "teacher" },
        { id: 103, name: "zxy", age: 19, job: "teacher" },
        { id: 104, name: "hxy", age: 19, job: "teacher" },
        { id: 105, name: "wxy", age: 19, job: "teacher" },
      ],
      currentData: {},
    };
  },
  methods: {
    // 退出
    exit() {
      this.$router.push("/");
    },
    // 获取到子组件传递过来的值
    getFather(sonData) {
      this.tableData.forEach((val, index) => {
        if (val.id === sonData.id) {
          // 响应式渲染组件
          this.$set(this.tableData, index, sonData);
        }
      });
    },
    // 编辑
    editIn(sonData) {
      // 接受子组件传递过来的值
      this.currentData = sonData;
      this.$router.push("/admin/editor");
    },
   
};
</script>

编辑组件

<template>
  <!-- <el-dialog> -->
  <div class="editDialog">
    <h3 class="title">编辑内容</h3>
    <el-form ref="form" :data="form" label-width="70px">
      <el-form-item label="姓名">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model="form.age"></el-input>
      </el-form-item>
      <el-form-item label="职业"
        ><el-input v-model="form.job"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit()">确认</el-button>
        <el-button @click="exit">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        id: "",
        name: "",
        age: "",
        job: "",
      },
    };
  },
  props: ["currentData"],//接受父组件传递数据
  methods: {
    onSubmit() {
      this.$emit("getFather", this.form);//向父组件传递数据
      this.$router.go(-1);
    },
    exit() {
      this.$router.go(-1);
    },
  },
  //生命周期?-?创建完成（可以访问当前this实例）
  created() {
    this.form = JSON.parse(JSON.stringify(this.currentData));//深拷贝
  },
};
</script>