综述
本文按下列步骤，做一个完整的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
找到引入如下这段代码。
2 layout布局
布局
找到并引入布局代码，再在内容里添加4个输入框（el-input-也在官网找）。
3 双向绑定数据对象
在input框中，有一个v-model，对应的就是data中的数据，这里我们建一个对象来表示。
4 table引入
找到table拷贝相应代码，别忘了把数据也拷贝过来，然后把数据改成自己的对象，参见最后完整代码。
简单解释下：
style="width: 100%"> 这个是table，data里的tableData对应的就是数据，它是一个数组。
label="日期"
width="180">
每个el-table-column就是对应的一列，对应的值就是prop对应的值，label就是表头显示的文字。- 数组对象
tableData: [
{
name: "小爱",
date: "2020-02-02",
amount: "3000",
total: "60",
},
],
table
5 按钮
在输入框和table之间增加一个添加按钮，同样是找到引入即可。
按钮
6 序号
在table中增加一个序号列，我们增加一列，是没有对应值的，这个值是取不到的，这里怎么办呢？
有两种方法，我们使用template这种,在table里增加这样一列就可以了。
{{scope.$index+1}}
7 修改与删除按钮
在最后一行，我们添加一个修改和删除按钮。
8 添加用户
给按钮绑定一个@click方法，方法的实现写到methods中,然后点击按钮，向tableData数组中添加一条数据。
添加记录
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（在日期里找）
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能拿到数组序号，面壁去！
完整代码
html
element-ui:增删改查
缴费记录
添加记录
{{scope.$index+1}}
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
},
},
});
修改呢？？？
修改有点复杂，见下一篇吧。