1. 引入vue.js 和 element-ui
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue簡(jiǎn)單案例</title>
<link rel="stylesheet" ></link>
<script src="https://cdn.bootcss.com/vue/2.2.1/vue.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/1.2.3/index.js"></script>
</head>
<body>
2. element-ui列表模板
<div id="app">
<template>
<el-table
:data="tableData"
border
style="width: 100%">
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
<el-table-column operation="操作" label="操作">
<template scope="scope">
<el-button size="small" @click="modify(scope.$index, scope.row)">編輯 </el-button>
<el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">刪除</el-button>
</template>
</el-table-column>
</el-table>
<el-button class="add_btn" @click="dialogFormVisible = true">添加</el-button>
<el-dialog title="添加" v-model="dialogFormVisible ">
<el-form :model="form">
<el-form-item label="日期" :label-width="formLabelWidth">
<el-input v-model="form.date" auto-complete="off" size="small"></el-input>
</el-form-item>
<el-form-item label="姓名" :label-width="formLabelWidth">
<el-input v-model="form.name" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="地址" :label-width="formLabelWidth">
<el-input v-model="form.address" auto-complete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="add">確 定</el-button>
</div>
</el-dialog>
</template>
</div>
3. 初始化數(shù)據(jù)渲染列表
<script>
var vm = new Vue({
data() {
return {
form: { //添加列表時(shí),初始化數(shù)據(jù)
date: '',
name: '',
address: ''
},
formLabelWidth: '50px', //添加數(shù)據(jù)彈框label標(biāo)簽寬度
dialogFormVisible: false, //控制添加數(shù)據(jù)的彈框顯示關(guān)閉
tableData: [{ //初始化列表數(shù)據(jù)
date: '2016-05-02',
name: '王小虎1',
address: '上海市普陀區(qū)金沙江路 1518 弄',
}, {
date: '2016-05-04',
name: '王小虎2',
address: '上海市普陀區(qū)金沙江路 1517 弄',
}, {
date: '2016-05-01',
name: '王小虎3',
address: '上海市普陀區(qū)金沙江路 1519 弄',
}]
}
},
methods: { //方法
//添加
add(){
this.tableData.push(this.form);
this.dialogFormVisible = false;
},
//刪除
handleDelete(index, row){
this.tableData.splice(index, 1);
},
//編輯
modify(index, row) {
var that = this;
this.$prompt('修改姓名', '編輯', {
confirmButtonText: '保存',
cancelButtonText: '取消',
inputValue: row.name
}).then(function ({value}) {//編輯保存
row.name = value;
}).catch(function () { //編輯取消
that.$message({
type: 'info',
message: '取消編輯'
});
});
}
}
}).$mount('#app'); //$mount('#app')是作用域(說(shuō)白了就是一個(gè)div的盒子),用來(lái)存放列表
</script>
4.當(dāng)然還有style樣式
<style>
#app {
width: 90%;
margin: 30px auto;
}
.add_btn {
float: right;
margin: 10px 0;
}
.el-dialog--small {
width: 40%;
}
.el-dialog__body {
padding-bottom: 0;
}
</style>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。
