element-ui + vue 简易留言板
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>留言板</title> <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css"> </head> <body> <div id="messageboard"> <el-form ref="form" label-width="50px"> <el-form-item label="标题"> <el-input v-model="title" placeholder="请输入标题"></el-input> </el-form-item> <el-form-item label="内容"> <el-input v-model="content" placeholder="请输入内容"></el-input> </el-form-item> <el-form-item> <el-button @click="add()">添加</el-button> <el-button @click="handleReset">重置</el-button> </el-form-item> <el-table border :data="mydata"> <el-table-column label="编号" inline-template :context="_self"> <span>{{$index+1}}</span> </el-table-column> <el-table-column prop="title" label="标题"> </el-table-column> <el-table-column prop="content" label="内容"> </el-table-column> <el-table-column label="操作" inline-template :context="_self"> <span><el-button size="small" @click="showDialog()">删除</el-button></span> </el-table-column> </el-table> <div style="text-align:right" v-show="mydata.length>0"> <el-button size="small" @click="showDelallDialog()">全部删除</el-button> </div> </el-form> <el-dialog title="提示" v-model="dialogVisible" size="tiny"> <span v-if="nowIndex==-2">删除全部条留言</span> <span v-else>删除此条留言</span> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="del(nowIndex)" >确 定</el-button> </span> </el-dialog> </div> </body> <!-- 先引入 Vue --> <script src="https://unpkg.com/vue/dist/vue.js"></script> <!-- 引入组件库 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script> new Vue({ el: '#messageboard', data: function() { return { title: '', content: '', mydata: [], dialogVisible: false, nowIndex: -100, } }, methods: { add() { if (this.title == '' || this.content == '') { this.$message.error('请填写完整'); } else { this.mydata.push({ title: this.title, content: this.content, }); this.title = ''; this.content = ''; } }, showDialog() { this.dialogVisible = true; }, showDelallDialog() { this.dialogVisible = true; this.nowIndex = -2; }, del(n) { if (n == -2) { this.mydata = []; } else { this.mydata.splice(n, 1); } this.nowIndex = -100; this.dialogVisible = false; }, handleReset() { this.title = ''; this.content = ''; } }, }) </script> </html>