在线表格的实现

最新推荐文章于 2024-03-23 11:48:51 发布

blues_phone

最新推荐文章于 2024-03-23 11:48:51 发布

阅读量1.1k

点赞数

分类专栏：前端文章标签：在线表格 vue iview

本文链接：https://blog.csdn.net/huangmengfeng/article/details/89711131

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在线表格，bootstrap里面的 table模块是可以实现的，但是只能按照原来的模式。反正自己工作的时候，经常用到，下班有没有什么事，经常打wangzhe，这次，就分享个脚本，经常在网上抄东西，是时候回报一波了。

首先，vue官网，iview官网。

初始界面：

添加页面：

保存之后

最后源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link rel="stylesheet" href="https://unpkg.com/iview/dist/styles/iview.css">
<style type="text/css">
    #inline_tab {
        min-width: 800px;
        margin: 10px;
    }
    .tab {
        width: 100%;
        margin-top: 10px;
        border: 1px solid black;

    }
    .tab tr td{
        border: 1px solid black;
        text-align: center;
        margin: 0;
        padding: 3px;
        width:25%;
    }

</style>
<body>
<div id="inline_tab">
    <Row>
        <i-col span="16">
            <i-button style="float: right" @click="addItem" style="margin-left: 6px;">
                <icon type="md-add"></icon>
            </i-button>
            <i-button v-if="item_list[0].edit_status" style="float: right" @click="saveItem" style="margin-right: 5px;">
                保存
            </i-button>
        </i-col>
    </Row>
    <Row>
        <i-col span="16">
            <table class="tab" >
                <tr>
                    <td><b>Name</b></td>
                    <td><b>Sex</b></td>
                    <td><b>Birthday</b></td>
                    <td><b>Interest</b></td>
                </tr>
                <tr v-for="(item,index) in item_list">
                    <td v-if="item.edit_status">
                        <i-input v-model="item.name" placeholder="输入名字"></i-input>
                    </td>
                    <td v-else v-text="item.name"></td>

                    <td v-if="item.edit_status">
                        <radio-group v-model="item.sex">
                            <Radio value="男" label="男">男</Radio>
                            <Radio value="女" label="女">女</Radio>
                        </radio-group>
                    </td>
                    <td v-else v-text="item.sex"></td>

                    <td v-if="item.edit_status">
                         <date-picker v-model="item.birthday" type="date" placeholder="Select date" style="width: 200px"></date-picker>
                    </td>
                    <td v-else v-text="item.birthday"></td>

                    <td v-if="item.edit_status">
                        <i-select v-model="item.interest" multiple style="width:260px">
                            <i-option value="篮球" >篮球</i-option>
                            <i-option value="游戏" >游戏</i-option>
                            <i-option value="动漫" >动漫</i-option>
                        </i-select>
                    </td>
                    <td v-else v-text="item.interest"></td>
                </tr>
            </table>
        </i-col>

    </Row>
</div>

</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/iview/dist/iview.min.js"></script>
<script type="application/javascript">
    function getNow(s) {
            return s < 10 ? '0' + s : s;
    }

    function dateTypeToString(myDate = null) {
        if (myDate == null || myDate == '') {
            return ''
        }
        else {
            var year = myDate.getFullYear();
            //获取当前月
            var month = myDate.getMonth() + 1;
            //获取当前日
            var date = myDate.getDate();
            var h = myDate.getHours();       //获取当前小时数(0-23)
            var m = myDate.getMinutes();     //获取当前分钟数(0-59)
            var s = myDate.getSeconds();

            var now = year + '-' + getNow(month) + "-" + getNow(date);
            return now

        }

    }

    new Vue({
        el: '#inline_tab',
        data: {
            item_list: [
                {'name':'huang',
                'sex':'男',
                'birthday':'1998-04-03',
                'interest':'篮球,游戏,动漫',
                'edit_status':false}
            ]
        },
        methods: {
            addItem: function () {
                let _self = this
                let item = {
                    'name': '',
                    'sex': '',
                    'birthday': '',
                    'interest': '',
                    'edit_status': true
                }
                _self.item_list.unshift(item)

            },
            saveItem: function () {
                let _self = this
                for(let i=0;i<_self.item_list.length;i++){
                    let item = _self.item_list[i]
                    item.birthday = dateTypeToString(item.birthday)
                    item.edit_status = false
                }
            },
        }
    })
</script>

blues_phone

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
在线表格的实现

在线表格，bootstrap里面的 table模块是可以实现的，但是只能按照原来的模式。反正自己工作的时候，经常用到，下班有没有什么事，经常打wangzhe，这次，就分享个脚本，经常在网上抄东西，是时候回报一波了。首先，vue官网，iview官网。初始界面：添加页面：保存之后最后源码：<!DOCTYPE html><html lang...
复制链接

扫一扫