element-ui 增删改查

综述

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

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

1 引入

先新建一个html页面,然后在官网这个地方 - https://element.eleme.cn/#/zh-CN/component/installation
找到引入如下这段代码。


  
  
  
  

2 layout布局

布局

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

3 双向绑定数据对象

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


4 table引入

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