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

最新推荐文章于 2024-07-08 11:54:06 发布

linda`li

最新推荐文章于 2024-07-08 11:54:06 发布

阅读量6.1k

点赞数

分类专栏：前端VUE 文章标签： vue element 表格 table

本文链接：https://blog.csdn.net/lindali1115/article/details/82995572

版权

前端VUE 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

这边使用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()
        }
    }
})

linda`li

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
使用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...
复制链接

扫一扫

专栏目录