综述

本文按下列步骤，做一个完整的html+vue+element-ui的列表展示，常用于快速开发后台界面。无与数据接口交互内容。

如何引入element-ui
组件-layout布局使用
双向绑定数据对象
组件-table的使用
组件-button的使用
增加一个序号，template - scope的使用
组件-编辑与删除按钮
添加用户的方法
组件-日期的使用
组件-message的使用
删除的方法
组件-确认框的使用
组件-修改的弹出框
组件-form表单
修改的方法
一个简单的例子，用到了9个组件，足以快速入门element-ui了。

1 引入

先新建一个html页面，然后在官网这个地方 - 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布局

布局

找到并引入布局代码，再在内容里添加4个输入框（el-input-也在官网找）。

<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="请输入课节数"></el-input>
                    </div>
                </el-col>
            </el-row>
        </div>

3 双向绑定数据对象

在input框中，有一个v-model，对应的就是data中的数据，这里我们建一个对象来表示。

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

4 table引入

找到table拷贝相应代码，别忘了把数据也拷贝过来，然后把数据改成自己的对象，参见最后完整代码。
简单解释下：

<template>
<el-table
:data="tableData"
style="width: 100%"> 这个是table，data里的tableData对应的就是数据，它是一个数组。
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column> 每个el-table-column就是对应的一列，对应的值就是prop对应的值，label就是表头显示的文字。
数组对象

 tableData: [
        {
          name: "小爱",
          date: "2020-02-02",
          amount: "3000",
          total: "60",
        },
      ],

table

5 按钮

在输入框和table之间增加一个添加按钮，同样是找到引入即可。

按钮

6 序号

在table中增加一个序号列，我们增加一列，是没有对应值的，这个值是取不到的，这里怎么办呢？
有两种方法，我们使用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方法，方法的实现写到methods中,然后点击按钮，向tableData数组中添加一条数据。

        <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: "",
      };
      }

往数组中添加数据用 push方法！！！

9 日期

添加后，我们发现日期是不对的，这里我们引入日期组件，并使用对应的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能拿到数组序号，面壁去！

      <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" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <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="请输入课节数"></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="课节数">
                    </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="课节数">
                        <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: "冷昊远",
          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("确认删除？")
        .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
    },
  },
});

修改呢？？？

修改有点复杂，见下一篇吧。

element-ui 增删改查