使用vue.js+Element UI 实现报个增删改查

这边使用VUE是直接引用VUE.JS 没有使用脚手架搭建其中index.css index.js是element ui中可以到这边去下载https://unpkg.com/element-ui@2.4.8/vue.js是VUE官网里面想下载的地址如下https://cdn.jsdelivr.net/npm/vue/dist/vue.jsHTML代码<!DO...

linda`li

6213人浏览 · 2018-10-10 13:24:08

linda`li · 2018-10-10 13:24:08 发布

这边使用VUE是直接引用VUE.JS 没有使用脚手架搭建

其中index.css index.js是element ui中可以到这边去下载

https://unpkg.com/element-ui@2.4.8/

vue.js是VUE官网里面想下载的地址如下

https://cdn.jsdelivr.net/npm/vue/dist/vue.js

HTML代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- import CSS -->
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/table.css">
</head>
<body>
<div id="app" style="width: 800px">
    <template>
        <el-button size="small" type="primary" @click="addRow">新增</el-button>
        <el-button size="small" type="warning" @click="cancelHighlight">保存</el-button>
    </template>
    <el-table :data="tableData" class="tb-edit" style="width: 100%" highlight-current-row
              @row-click="handleCurrentChange" ref="mytable">
        <el-table-column label="日期" width="180">
            <template scope="scope">
                <el-input size="small" v-model="scope.row.date" placeholder="请输入内容" @row-click="handleEdit(scope.$index, scope.row)"></el-input> <span>{{scope.row.date}}</span>
            </template>
        </el-table-column>
        <el-table-column label="姓名" width="180">
            <template scope="scope">
                <el-input size="small" v-model="scope.row.name" placeholder="请输入内容" @row-click="handleEdit(scope.$index, scope.row)"></el-input> <span>{{scope.row.name}}</span>
            </template>
        </el-table-column>
        <el-table-column prop="address" label="地址">
            <template scope="scope">
                <el-input size="small" v-model="scope.row.address" placeholder="请输入内容" @row-click="handleEdit(scope.$index, scope.row)"></el-input> <span>{{scope.row.address}}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template scope="scope">
                <!--<el-button size="small" @click="handleEdit(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>
    <br>数据:{{tableData}}</div>
</div>
</body>
<!-- import Vue before Element -->
<script src="../js/vue.js"></script>
<script src="../js/index.js"></script>
<script src="../js/table.js"></script>
</html>

css 代码：

* {
    margin: 0;
    padding: 0
}
body {
    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    overflow: auto;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
}
.tb-edit .el-input {
    display: none
}
.tb-edit .current-row .el-input {
    display: block
}
.tb-edit .current-row .el-input+span {
    display: none
}

js 代码

var app = new Vue({
    el: '#app',
    data: {
        tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
        }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
        }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
        }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
        }]
    },

    methods:{
        /*选中行*/
        handleCurrentChange:function(row, event, column){
        },
        /*点击编辑*/
        handleEdit:function(index, row) {

        },
        /*点击删除*/
        handleDelete:function(index, row) {
            this.tableData.splice(this.tableData.indexOf(row),1);
        },
        /*点击新增*/
        addRow:function(){
            this.tableData.push({date:'',name:'',address:''});
            this.$refs.mytable.setCurrentRow(this.tableData[this.tableData.length-1])
        },
        cancelHighlight:function (index,row) {
            console.log(index)
            this.$refs.mytable.setCurrentRow()
        }
    }
})

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^