element-ui 增刪改查

綜述

本文按下列步驟，做一個完整的html+vue+element-ui的列表展示，常用于快速開發(fā)后臺界面。無與數(shù)據(jù)接口交互內(nèi)容。

  1. 如何引入element-ui
  2. 組件-layout布局使用
  3. 雙向綁定數(shù)據(jù)對象
  4. 組件-table的使用
  5. 組件-button的使用
  6. 增加一個序號，template - scope的使用
  7. 組件-編輯與刪除按鈕
  8. 添加用戶的方法
  9. 組件-日期的使用
  10. 組件-message的使用
  11. 刪除的方法
  12. 組件-確認(rèn)框的使用
  13. 組件-修改的彈出框
  14. 組件-form表單
  15. 修改的方法
    一個簡單的例子，用到了9個組件，足以快速入門element-ui了。

1 引入

先新建一個html頁面，然后在官網(wǎng)這個地方 - https://element.eleme.cn/#/zh-CN/component/installation
找到引入如下這段代碼。

<!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return { visible: false }
      }
    })
  </script>

2 layout布局

布局

找到并引入布局代碼，再在內(nèi)容里添加4個輸入框（el-input-也在官網(wǎng)找）。

<div class="head">
            <el-row :gutter="20">
                <el-col :span="6">
                    <div class="grid-content bg-purple">
                        <el-input v-model="userInfo.name" placeholder="請輸入姓名"></el-input>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content bg-purple">
                        <el-date-picker v-model="userInfo.date" type="date" format="yyyy 年 MM 月 dd 日"
                            value-format="yyyy-MM-dd" placeholder="請選擇繳費日期">
                        </el-date-picker>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content bg-purple">
                        <el-input v-model="userInfo.amount" placeholder="請輸入繳費金額"></el-input>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content bg-purple">
                        <el-input v-model="userInfo.total" placeholder="請輸入課節(jié)數(shù)"></el-input>
                    </div>
                </el-col>
            </el-row>
        </div>

3 雙向綁定數(shù)據(jù)對象

在input框中，有一個v-model，對應(yīng)的就是data中的數(shù)據(jù)，這里我們建一個對象來表示。

<script>
    new Vue({
      el: '#app',
      data: function() {
        return { 
          userInfo: {
          name: "",
          date: "",
          amount: "",
          total: "",
      },        
 }
      }
    })
  </script>

4 table引入

找到table拷貝相應(yīng)代碼，別忘了把數(shù)據(jù)也拷貝過來，然后把數(shù)據(jù)改成自己的對象，參見最后完整代碼。
簡單解釋下：

  • <template>
    <el-table
    :data="tableData"
    style="width: 100%"> 這個是table，data里的tableData對應(yīng)的就是數(shù)據(jù)，它是一個數(shù)組。
  • <el-table-column
    prop="date"
    label="日期"
    width="180">
    </el-table-column> 每個el-table-column就是對應(yīng)的一列，對應(yīng)的值就是prop對應(yīng)的值，label就是表頭顯示的文字。
  • 數(shù)組對象
 tableData: [
        {
          name: "小愛",
          date: "2020-02-02",
          amount: "3000",
          total: "60",
        },
      ],
table

5 按鈕

在輸入框和table之間增加一個添加按鈕，同樣是找到引入即可。


按鈕

6 序號

在table中增加一個序號列，我們增加一列，是沒有對應(yīng)值的，這個值是取不到的，這里怎么辦呢？
有兩種方法，我們使用template這種,在table里增加這樣一列就可以了。

<el-table-column label="序號" width="180">
                        <template slot-scope="scope">
                            {{scope.$index+1}}
                        </template>
                    </el-table-column>

7 修改與刪除按鈕

在最后一行，我們添加一個修改和刪除按鈕。

<el-table-column label="操作">
                        <template slot-scope="scope">

                            <el-button type="primary" @click="edit(scope.row,scope.$index)" icon="el-icon-edit" circle>
                            </el-button>
                            <el-button type="danger" @click="del(scope.$index)" icon="el-icon-delete" circle>
                            </el-button>
                        </template>

                    </el-table-column>

8 添加用戶

給按鈕綁定一個@click方法，方法的實現(xiàn)寫到methods中,然后點擊按鈕，向tableData數(shù)組中添加一條數(shù)據(jù)。

        <el-button type="primary" class="add-btn" @click="add">添加記錄</el-button>

methods: {
    add() {
      if (!this.userInfo.name) {
        this.$message({
          showClose: true,
          message: "請輸入姓名",
          type: "warning",
        });
        return;
 this.tableData.push(this.userInfo);
      this.userInfo = {
        //清空userInfo
        name: "",
        date: "",
        amount: "",
        total: "",
      };
      }

往數(shù)組中添加數(shù)據(jù)用 push方法 ！?。?/p>

9 日期

添加后，我們發(fā)現(xiàn)日期是不對的，這里我們引入日期組件，并使用對應(yīng)的format（在日期里找）

<el-col :span="6">
                    <div class="grid-content bg-purple">
                        <el-date-picker v-model="userInfo.date" type="date" format="yyyy 年 MM 月 dd 日"
                            value-format="yyyy-MM-dd" placeholder="請選擇繳費日期">
                        </el-date-picker>
                    </div>
                </el-col>

10 message組件
校驗下非空，如果為空，找到 消息提醒->警告，用一下消息提醒代碼。


消息提醒
if (!this.userInfo.name) {
        this.$message({
          showClose: true,
          message: "請輸入姓名",
          type: "warning",
        });
        return;
      }

11 刪除

  • 刪除用什么方法？ this.tableData.splice(idx, 1); splice 傳入id，1表示刪除一個。
  • id怎么傳入，不是剛講過template能拿到數(shù)組序號，面壁去！
      <el-table-column label="操作">
                        <template slot-scope="scope">

                            <el-button type="primary" @click="edit(scope.row,scope.$index)" icon="el-icon-edit" circle>
                            </el-button>
                            <el-button type="danger" @click="del(scope.$index)" icon="el-icon-delete" circle>
                            </el-button>
                        </template>

                    </el-table-column>

完整代碼

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>element-ui:增刪改查</title>
    <link rel="stylesheet" >
    <link rel="stylesheet" href="./css/index.css">

</head>

<body>
    <div id="app">
        <h2>繳費記錄</h2>
        <div class="head">
            <el-row :gutter="20">
                <el-col :span="6">
                    <div class="grid-content bg-purple">
                        <el-input v-model="userInfo.name" placeholder="請輸入姓名"></el-input>

                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content bg-purple">
                        <el-date-picker v-model="userInfo.date" type="date" format="yyyy 年 MM 月 dd 日"
                            value-format="yyyy-MM-dd" placeholder="請選擇繳費日期">
                        </el-date-picker>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content bg-purple">
                        <el-input v-model="userInfo.amount" placeholder="請輸入繳費金額"></el-input>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content bg-purple">
                        <el-input v-model="userInfo.total" placeholder="請輸入課節(jié)數(shù)"></el-input>
                    </div>
                </el-col>
            </el-row>
        </div>
        <el-button type="primary" class="add-btn" @click="add">添加記錄</el-button>
        <div class="body">
            <template>
                <el-table :data="tableData" style="width: 100%">

                    <el-table-column label="序號" width="180">
                        <template slot-scope="scope">
                            {{scope.$index+1}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="名字" width="180">
                    </el-table-column>
                    <el-table-column prop="date" label="繳費日期" width="180">
                    </el-table-column>
                    <el-table-column prop="amount" label="繳費金額" width="180">
                    </el-table-column>
                    <el-table-column prop="total" label="課節(jié)數(shù)">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">

                            <el-button type="primary" @click="edit(scope.row,scope.$index)" icon="el-icon-edit" circle>
                            </el-button>
                            <el-button type="danger" @click="del(scope.$index)" icon="el-icon-delete" circle>
                            </el-button>
                        </template>

                    </el-table-column>
                </el-table>
            </template>
        </div>
        <el-dialog title="編輯用戶信息" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <div>
                <el-form ref="form" :model="editObj" label-width="80px">
                    <el-form-item label="姓名">
                        <el-input v-model="editObj.name"></el-input>
                    </el-form-item>
                    <el-form-item label="時間">
                        <el-date-picker v-model="editObj.date" type="date" format="yyyy 年 MM 月 dd 日"
                        value-format="yyyy-MM-dd" >
                    </el-date-picker>
                    </el-form-item>
                    <el-form-item label="金額">
                        <el-input v-model="editObj.amount"></el-input>
                    </el-form-item>
                    <el-form-item label="課節(jié)數(shù)">
                        <el-input v-model="editObj.total"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="editUser">確 定</el-button>
            </span>
        </el-dialog>
    </div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="./js/index.js"></script>

</html>

js,別告訴我不會引入哦。

new Vue({
  el: "#app",
  data: function () {
    return {
      userInfo: {
        name: "",
        date: "",
        amount: "",
        total: "",
      },
      tableData: [
        {
          name: "冷昊遠(yuǎn)",
          date: "2020-02-02",
          amount: "3000",
          total: "60",
        },
      ],
      dialogVisible: false,
      editIndex:0,
      editObj: {
        name: "",
        date: "",
        amount: "",
        total: "",
      },
    };
  },
  methods: {
    add() {
      if (!this.userInfo.name) {
        this.$message({
          showClose: true,
          message: "請輸入姓名",
          type: "warning",
        });
        return;
      }
      this.tableData.push(this.userInfo);
      this.userInfo = {
        //清空userInfo
        name: "",
        date: "",
        amount: "",
        total: "",
      };
    },
    del(idx) {
      this.$confirm("確認(rèn)刪除？")
        .then((_) => {
          this.tableData.splice(idx, 1);
        })
        .catch((_) => {});
    },
    edit(item, idx) {        
      this.editObj = {
        name: item.name,
        date: item.date,
        amount: item.amount,
        total: item.total,
      };
      this.editIndex=idx
      this.dialogVisible=true
    },
    editUser(){
        this.tableData.splice(this.editIndex,1,this.editObj)
        this.dialogVisible=false
    },
    handleClose() {
        this.dialogVisible=false
    },
  },
});

修改呢？？？

修改有點復(fù)雜，見下一篇吧。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容