element-ui+vue简易留⾔板<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>留⾔板</title>
<!-- 引⼊样式 -->
<link rel="stylesheet" href="unpkg/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 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="unpkg/vue/dist/vue.js"></script>
<!-- 引⼊组件库 -->
<script src="unpkg/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 == '' || t == '') {
this.$('请填写完整');
} else {
title: this.title,
content: t,
});
this.title = '';
}
},
showDialog() {
this.dialogVisible = true;            },
showDelallDialog() {
this.dialogVisible = true;                wIndex = -2;
},
del(n) {
if (n == -2) {
elementui登录界面
} else {
this.dialogVisible = false;            },
handleReset() {
this.title = '';
}
},
})
</script>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。