vue实现输入行和列生成表格

最新推荐文章于 2024-05-14 19:53:07 发布

ZLENGANG

最新推荐文章于 2024-05-14 19:53:07 发布

阅读量1.9k

点赞数 5

分类专栏： vue 文章标签： vue js 前端

本文链接：https://blog.csdn.net/weixin_43821923/article/details/110458288

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

vue实现输入行和列生成表格

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="widtd=device-widtd, initial-scale=1.0">
    <title>vue实现输入行和列生成表格</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script src="../node_modules/axios/dist/axios.js"></script>
    <style>
        html,
        body,
        #app {
            height: 100%;
        }

        td {
            min-width: 60px;
            width: auto;
            height: 30px;
        }

        td>span {
            display: inline-block;
            width: 100%;
            height: 100%;
        }

        td>input {
            display: inline;
        }
    </style>
</head>

<body>
    <div id="app" @click='clickOther($event)'>
        <div>
            行： <input type="number" v-model='rows'>
            列： <input type="number" v-model='cols' id="cols">
        </div>
        <br />
        <div>
            <table border="1" cellspacing="0" v-if="tableData.length" ref="table">
                <tr v-for="(arr, index) in tableData" :key="index">
                    <td v-for="(item, index1) in arr" :key="index1">
                        <span v-show='!item.isEdit' @click='clickTd(item,$event)'>{{item.name}}</span>
                        <input type="text" v-model="item.name" v-if='item.isEdit' />
                    </td>
                </tr>
            </table>
        </div>
        <button @click="output">输出</button>
        <button @click='importData'>导入数据</button>
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                rows: 0,
                cols: 0,
                tableData: [

                ]
            },
            methods: {
                //点击其他地方使表格置为非编辑状态
                clickOther(e) {
                    var curDom = (e && e.target) || (event && event.srcElement);
                    var table = this.$refs.table
                    if (table && !table.contains(curDom)) {
                        this.removeEdit()
                    }
                },
                // 使表格置为非编辑状态
                removeEdit() {
                    this.tableData.forEach(arr => {
                        arr.forEach(item => {
                            item.isEdit = false
                        })
                    })
                },
                //生成表格
                submit() {
                    let rows = this.rows * 1
                    let cols = this.cols * 1
                    let arr = []
                    let tableDataCopy = JSON.parse(JSON.stringify(this.tableData))
                    for (let i = 0; i < this.rows; i++) {
                        arr[i] = []
                        for (let j = 0; j < this.cols; j++) {
                            arr[i][j] = {
                                isEdit: false,
                                name: tableDataCopy[i] ? (tableDataCopy[i][j] ? tableDataCopy[i][j].name : '') : ''
                            }
                        }
                    }
                    this.tableData = arr
                },
                //点击表格内的单元格使单元格变成编辑状态
                clickTd(item, event) {
                    this.removeEdit()
                    item.isEdit = true
                    this.$nextTick(() => {
                        event.target.nextElementSibling.focus()
                    })
                },
                // 导出数据
                output() {
                    console.log(this.tableData)
                },
                // 导入数据
                async importData() {
                    const {data}= await axios.get('../json/table.json')
                    let importData=data.data
                    this.rows=importData.length
                    this.cols=importData[0].length
                    importData.forEach(arr=>{
                        arr.forEach(item=>{
                            item.isEdit=false
                        })
                    })
                    this.tableData=importData
                }
            },
            watch: {
                // 监听行输入框变化
                rows() {
                    this.submit()
                },
                // 监听列输入框变化
                cols() {
                    this.submit()
                }
            }
        })
    </script>
</body>

</html>

输入行和列的效果如下：

导入数据table.json

{
    "data": [
        [{"name": "zl11"},{"name": "zl12"},{"name": "zl13"},{"name": "zl14"}],
        [{"name": "zl11"},{"name": "zl12"},{"name": "zl13"},{"name": "zl14"}],
        [{"name": "zl11"},{"name": "zl12"},{"name": "zl13"},{"name": "zl14"}]
    ]
}

点击导入数据效果如下：

ZLENGANG

关注

5
点赞
踩
13

收藏

觉得还不错? 一键收藏
1
评论
vue实现输入行和列生成表格

vue实现输入行和列生成表格<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="widtd=device-widtd, initial-scale=1.0"> <title>vue实现输入行和列生成表格</title> <script src="..
复制链接

扫一扫