element-ui+vue.js 简易留言板

最新推荐文章于 2023-12-08 16:57:55 发布

a1223f

最新推荐文章于 2023-12-08 16:57:55 发布

阅读量3.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue.js 文章标签：留言板 element-ui vue

本文链接：https://blog.youkuaiyun.com/a1223f/article/details/54344094

vue.js 专栏收录该内容

0 篇文章

订阅专栏

这篇博客展示了一个使用Element-UI库和Vue.js框架创建的简易留言板应用。用户可以输入标题和内容，点击添加按钮将留言保存到表格中。表格显示每条留言的编号、标题和内容，并提供删除功能。此外，还提供了删除所有留言的选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>