vue element表格的增删改查（细）

待我称王封你为后i 2022-12-29 00:19 164阅读 0赞

## 贴上完整的代码和对应图： ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTYzODQx_size_16_color_FFFFFF_t_70][]

<template >
      <div class="hello">
        <div class="searchDiv">
          <el-col :span="4">
            
            <el-input v-model="input" placeholder="请输入内容"></el-input>
          </el-col>
          <el-button type="primary" icon="el-icon-search" @click="search(input)">搜索</el-button>
          
          <el-button type="primary" @click="toAdd">新添书籍</el-button>
    
          <el-dialog title="添加书籍" :visible.sync="dialogFormVisible">
            <el-form>
              <el-form-item label="书名" :label-width="formLabelWidth">
                <el-input v-model="bookName"></el-input>
              </el-form-item>
    
              <el-form-item label="作者" :label-width="formLabelWidth">
                <el-input v-model="bookAuthor"></el-input>
              </el-form-item>
    
              <el-form-item label="价格" :label-width="formLabelWidth">
                <el-input v-model="bookPrice"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="add(bookName,bookAuthor,bookPrice)">保存</el-button>
            </div>
          </el-dialog>
        </div>
        <div class="tableDiv">
          <el-table :data="tableData" style="width: 100%" ref="myTable">
            <el-table-column type="index" :index="indexMethod"></el-table-column>
            <el-table-column prop="name" label="书名" width="180"></el-table-column>
            <el-table-column prop="author" label="作者" width="180"></el-table-column>
            <el-table-column prop="price" label="价格"></el-table-column>
            <el-table-column prop="address" label="操作">
              <template slot-scope="scope">
                <i class="el-icon-close" @click="dele(scope.$index)"></i>
                <i class="el-icon-edit" @click="edit(scope.$index,scope.row)"></i>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: "HelloWorld",
      data() {
        return {
          input: "",
          bookPrice: "",
          bookAuthor: "",
          bookName: "",
          dialogFormVisible: false,
          formLabelWidth: "100px",
          form: {},
          searchData: "",
          tableData: [
            {
              name: "家",
              author: "老舍",
              price: "29.90"
            },
            {
              name: "凉生我们可不可以不忧伤",
              author: "乐米",
              price: "24.8"
            },
            {
              name: "未来",
              author: "王家",
              price: "28.8"
            },
            {
              name: "蔷薇",
              author: "安妮",
              price: "34.4"
            }
          ],
          oldVal: [],
          newVal: [],
          editIndex: "",
          qubie: ""
        };
      },
      methods: {
        handleClose(done) {
          this.$confirm("确认关闭？")
            .then(_ => {
              done();
            })
            .catch(_ => {});
        },
        // 新增和编辑书籍功能
        add(bookName, bookAuthor, bookPrice) {
          // 编辑
          if (this.qubie == "edit") {
            // console.log(this.editIndex);
            var editBook = this.tableData[this.editIndex];
            // console.log(editBook)
            editBook.name = bookName;
            editBook.author = bookAuthor;
            editBook.price = bookPrice;
            this.dialogFormVisible = false;
    
            // this.bookName = "";
          }
          // 新增
          if (this.qubie == "add") {
            console.log(2);
            if (bookName == "" || bookAuthor == "" || bookPrice == "") {
              this.dialogFormVisible = true;
              // console.log(1)
            } else {
              this.dialogFormVisible = false;
              // console.log(bookName, bookAuthor, bookPrice);
              var newBook = {
                name: bookName,
                author: bookAuthor,
                price: bookPrice
              };
              this.tableData.push(newBook);
              this.bookName = "";
              this.bookAuthor = "";
              this.bookPrice = "";
            }
          }
        },
        // 删除
        dele(index) {
          // console.log(index)
          this.tableData.splice(index, 1);
        },
        // 点击编辑按钮
        edit(index, row) {
          // console.log(row.name);
          this.dialogFormVisible = true;
          this.bookName = row.name;
          this.bookAuthor = row.author;
          this.bookPrice = row.price;
          // console.log(index)
          this.editIndex = index;
          this.qubie = "edit";
        },
        // 点击添加按钮
        toAdd() {
          this.dialogFormVisible = true;
          this.bookName = "";
          this.bookAuthor = "";
          this.bookPrice = "";
          this.qubie = "add";
        },
        // 查找
        search(input) {
          // console.log(input)
          var newData = [];
          this.tableData.map((item, index) => {
            if (item.name.includes(input)) {
              newData.push(item);
              this.$refs.myTable.data = newData;
            }
          });
          return newData;
          // console.log(this.tableData)
        }
      }
    };
    </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTYzODQx_size_16_color_FFFFFF_t_70]: /images/20221120/c3839eb0d9ed4d30a2209adefb5cfd1c.png