next UI

# TablePaste 粘贴表格数据

# 概述

从网页、Excel 或其它软件复制表格数据，粘贴后，会格式化显示在标准的 Table 组件里。
输入框、表格支持自定义配置，粘贴的数据有误时，也会告知具体错误的数据行。

# 代码示例

基础用法
可以尝试从网页、Excel 或其它软件复制一段表格数据，粘贴在左边的输入框内，右边会自动渲染成 Table。
暂无数据
<template>
    <TablePaste 
        :input-props="inputProps"  
        @on-success="handleSuccess" 
        @on-error="handleError" />
</template>
<script>
    export default {
        data () {
            return {
                inputProps: {
                    placeholder: '尝试从网页、Excel 或其它软件复制一段表格数据，粘贴在这里'
                }
            }
        },
        methods: {
            handleSuccess (tableData) {
                console.log(tableData);
            },
            handleError (tableData, errorIndex) {
                console.log(tableData, errorIndex);  
            }
        }
    }
</script>
Expand Copy
定制输入框及表格样式
定制输入框及表格样式
暂无数据
<template>
    <TablePaste 
        :input-props="inputProps"
        :table-props="tableProps"
        @on-success="handleSuccess" 
        @on-error="handleError" />
</template>
<script>
    export default {
        data () {
            return {
                inputProps: {
                    rows: 10,
                    placeholder: '尝试从网页、Excel 或其它软件复制一段表格数据，粘贴在这里，尝试复制一段较多的数据'
                },
                tableProps: {
                    border: true,
                    maxHeight: 200
                }
            }
        },
        methods: {
            handleSuccess (tableData) {
                console.log(tableData);
            },
            handleError (tableData, errorIndex) {
                console.log(tableData, errorIndex);  
            }
        }
    }
</script>
Expand Copy
自己控制表格
设置属性 hide-table 会只显示输入框，这时可以根据事件得到表格数据后自行渲染 Table。

下面是自己的表格

暂无数据
<template>
    <TablePaste hide-table :input-props="inputProps" @on-success="handleSuccess" @on-error="handleError" />
    <p class="ivu-m"><strong>下面是自己的表格</strong></p>
    <Table :columns="columns" :data="data" border />
</template>
<script>
    export default {
        data () {
            return {
                inputProps: {
                    rows: 10,
                    placeholder: '尝试从网页、Excel 或其它软件复制一段表格数据，粘贴在这里'
                },
                columns: [],
                data: []
            }
        },
        methods: {
            handleSuccess (tableData) {
                console.log(tableData);
                this.columns = tableData.columns;
                this.data = tableData.data;
            },
            handleError (tableData, errorIndex) {
                console.log(tableData, errorIndex);
                this.$Message.error('表格数据有误');
            }
        }
    }
</script>
Expand Copy
使用其它输入框
默认为普通输入框，如果想使用其它输入控件，比如 codemirror 或 Ace，可以自定义 slot，这时需传入 value 属性。

下面是原生的 textarea 输入框，实际业务中，也可以使用 codemirror 或 Ace 等编辑器

暂无数据
<template>
    <div>
        <p class=ivu-m><strong>下面是原生的 textarea 输入框，实际业务中，也可以使用 codemirror 或 Ace 等编辑器</strong></p>
        <TablePaste :value="value" @on-success="handleSuccess" @on-error="handleError">
            <textarea v-model="value" rows="3" cols="50" placeholder="尝试从网页、Excel 或其它软件复制一段表格数据，粘贴在这里"></textarea>
        </TablePaste>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                value: ''
            }
        },
        methods: {
            handleSuccess (tableData) {
                console.log(tableData);
            },
            handleError (tableData, errorIndex) {
                console.log(tableData, errorIndex);  
            }
        }
    }
</script>
Expand Copy

# API

# TablePaste props

数据以 Tab 键换列，回车键换行

属性 说明 类型 默认值
value 组件默认为左右结构，左边输入框，右边显示表格，如果想自定义输入框 (即使用 slot) 时，需设置该值 String -
hide-table 是否隐藏右侧表格，开启后，只会显示输入框，这时用户可以根据事件自己渲染 Table Boolean false
input-props 代理的 Input props Object {}
table-props 代理的 Table props Object {}

# TablePaste Events

事件名 说明 返回值
on-change 输入框内容变化时触发，返回内容 content
on-success 表格渲染正确时触发，返回表格数据 tableData (含 columns 和 data) tableData
on-error 表格渲染错误时触发，返回表格数据 tableData (含 columns 和 data) 及 错误行序号 errorIndex (从 1 计数) tableData, errorIndex

# TablePaste Slots

名称 说明
default 默认为普通输入框，如果想使用其它输入控件，比如 codemirror 或 Ace，可以自定义 slot，这时需传入 value 属性

← 倒计时 →