首页 > 代码库 > element-ui + vue 简易留言板

element-ui + vue 简易留言板

2024-08-31 15:23:32   215人阅读

<!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="http://www.mamicode.com/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 = http://www.mamicode.com/[];>

　　

element-ui + vue 简易留言板


联系
我们