# EditableTable

**Repository Path**: sxLiQiComponent/editable-table

## Basic Information

- **Project Name**: EditableTable
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-03-09
- **Last Updated**: 2024-09-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 安装

```shell
npm install @sxliqi/editable-table
```

## 引入依赖文件

```js
import { createApp } from "vue";
import App from "./App.vue";

import "@sxliqi/editable-table/dist/index.css";
import EditableTable from "@sxliqi/editable-table";

createApp(App).use(EditableTable).mount("#app");
```

## 在页面编辑组件

```vue

<template>
    <div style="margin: 20px;padding:20px;border:1px solid #dedede;">
        <EditableTable
            ref="editTable"
            :columns="columns"
            v-model:data-source="dataSource"
            row-first-key="name"
            show-search
            show-footer
            :rules="rules"
        >
            <template #toolBtn>
                <vxe-button @click="insert5">新增5行</vxe-button>
                <vxe-button @click="insertAt(3)">在第3行处插入</vxe-button>
                <vxe-button @click="getSelect">获取选中</vxe-button>
                <vxe-button @click="getRecordSet">获取表格变动数据</vxe-button>
                <vxe-button @click="getTableData">获取表格数据</vxe-button>
                <vxe-button @click="updateTable">更新表格数据</vxe-button>
                <vxe-button @click="validateAll">校验表格数据</vxe-button>
            </template>
            <template #bodyCellEdit="{ column, row, rowIndex }">
                <template v-if="column.key === 'age'">
                    <input
                        type="text"
                        class="test-input"
                        v-model="row.age"
                        @keyup="($event) => onKeyUp($event, 'address', row, rowIndex)"
                    />
                </template>
            </template>
        </EditableTable>
    </div>
    <div>
        <div>[</div>
        <div style="text-indent: 2em">
            <div v-for="item in dataSource" :key="item">{{ JSON.stringify(item) }}</div>
        </div>
        <div>]</div>
    </div>
</template>

<script>
    import { ref } from "vue";
    import dataCheck from "./utils/dataCheck";

    export default {
        name: "App",
        setup() {
            const columns = [
                {
                    key: "name",
                    title: "姓名",
                    nextKey: "sex",
                    edit: true,
                    columnProps: {
                        minWidth: 200
                    }
                },
                {
                    key: "sex",
                    title: "性别",
                    nextKey: "age",
                    edit: true
                },
                {
                    key: "age",
                    title: "年龄",
                    nextKey: "address",
                    edit: true,
                    sum: true,
                    slots: {
                        edit: true
                    },
                    editRender: {
                        autofocus: ".test-input",
                        autoselect: true
                    }
                },
                {
                    key: "address",
                    title: "地址",
                    nextKey: "role",
                    edit: true
                },
                {
                    key: "role",
                    title: "角色",
                    nextKey: "nextLine",
                    edit: true
                }
            ];
            const rules = {
                name: [dataCheck.required({})],
                sex: [dataCheck.required({})]
            };
            const dataSource = ref([
                { id: 10001, name: "Test1", role: "Develop", sex: "Man", age: 28, address: "test abc" },
                { id: 10002, name: "Test2", role: "Test", sex: "Women", age: 22, address: "Guangzhou" },
                { id: 10003, name: "Test3", role: "PM", sex: "Man", age: 32, address: "Shanghai" },
                { id: 10004, name: "Test4", role: "Designer", sex: "Women", age: 24, address: "Shanghai" }
            ]);

            const editTable = ref();

            const insert5 = () => {
                const { insert } = editTable.value;
                insert(-1, 5);
            };
            const insertAt = (rowIndex) => {
                const { insert, getTableData } = editTable.value;
                insert(getTableData().tableData[rowIndex - 1]);
            };
            const getSelect = () => {
                const { getSelect } = editTable.value;
                getSelect();
            };
            const getRecordSet = () => {
                const { getRecordSet } = editTable.value;
                getRecordSet();
            };
            const getTableData = () => {
                const { getTableData } = editTable.value;
                getTableData();
            };
            const updateTable = () => {
                const { update } = editTable.value;
                update();
            };
            const validateAll = () => {
                const { validateAll } = editTable.value;
                validateAll()
                    .then(() => {
                    })
                    .catch((errMap) => {
                        console.log(errMap);
                    });
            };
            const onKeyUp = (e, nextKey, row, rowIndex) => {
                const { onKeyupToNext } = editTable.value;
                onKeyupToNext(e, nextKey, row, rowIndex);
            };

            return {
                columns,
                rules,
                dataSource,

                editTable,

                insert5,
                insertAt,
                getSelect,
                getRecordSet,
                getTableData,
                updateTable,
                validateAll,
                onKeyUp
            };
        }
    };
</script>

<style scoped></style>
```

# API

## Props

| 参数               | 说明                                                       | 类型                                   | 默认值   |
|------------------|----------------------------------------------------------|--------------------------------------|-------|
| columns          | 表格列的配置描述，具体项见下方                                          | array                                | -     |
| rowFirstKey      | 表格第一列显示在字段                                               | string                               | -     |
| dataSource       | 数据数组                                                     | object[ ]                            |       |
| rules            | 表单验证规则，具体见下表                                             | object                               |       |
| showToolBar      | 是否显示顶部工具栏boolean                                         | boolean                              | true  |
| maxHeight        | 表格最大高度                                                   | number                               | 500   |
| rowHeight        | 表格行高，建议>=50                                              | number                               | 50    |
| showSearch       | 是否显示内容搜索模块                                               | boolean                              | false |
| showFooter       | 是否显示底部内容。默认显示合计。                                         | boolean                              | false |
| footerMethod     | 表尾的数据获取方法，返回一个二维数组，当`showFooter` 为 `true`时生效。默认为计算合计的方法。 | `({ columns, data }) => any[][]`     |       |
| addNewLineAtLast | 是否在最后一行，最后一列点击`Enter`时新增一行空数据                            | boolean                              | true  |
| virtualScroll    | 是否启用虚拟滚动技术，加载数据较多时使用。建议仅在查看数据时使用。                        | boolean                              | false |
| inputChange      | 当输入框内容更改时触发的事件                                           | event，参数({value, key, row, rowIndex) |       |

### Column

| 参数            | 说明                                                                                                                               | 类型               | 默认值                                        |
|:--------------|:---------------------------------------------------------------------------------------------------------------------------------|:-----------------|:-------------------------------------------|
| key           | 列数据在数据项中对应的字段                                                                                                                    | string           | -                                          |
| title         | 列数据在数据项中对应的标题                                                                                                                    | string           | -                                          |
| nextKey       | 点击`Enter`，跳转列对应的字段值，当设置为`nextLine`时跳转到下一行或新增一行                                                                                   | string           |                                            |
| sum           | 当`showFooter`为`true`时，`footerMethod`为默认方法，自动计算对应列的合计                                                                             | boolean          | false                                      |
| edit          | 对应列的单元格是否允许编辑                                                                                                                    | boolean          | false                                      |
| slots         | 分别对应相应插槽 [edit,content,default],当对应属性开启时，可以使用对应的`bodyCell`插槽，插槽名对应相应的设置。如：`key:'age' `,`slots:{edit:true}`,相应的插槽名`bodyCellEdit`。 | string           | `{edit:false,content:false,default:false}` |
| editRender    | 当`edit`设置`true`时，`editRender`才可配置，具体见 [vxe-column](https://vxetable.cn/#/column/api)                                             | object           | { }                                        |
| columnProps   | `vxe-table` 中`column`的配置，除了`title`,`field`,`edit-render`均可配置，具体见 [vxe-column](https://vxetable.cn/#/column/api)                  | object           | { }                                        |
| batch         | 对应列是否允许批量设置                                                                                                                      | boolean          | false                                      |
| batchType     | 对应列批量设置的类型                                                                                                                       | string           | 无，可选值`date`,`number`                       |
| batchCallback | 对应列批量设置后的回调                                                                                                                      | function,参数`row` | 无                                          |

### Rules

| 参数         | 说明                                                                               | 类型                                         | 默认值      |
|:-----------|:---------------------------------------------------------------------------------|:-------------------------------------------|:---------|
| trigger    | 校验触发的时机                                                                          | 'blur' \| 'change' \| `['change', 'blur']` | -        |
| enum       | 枚举类型                                                                             | string                                     | -        |
| len        | 字段长度                                                                             | number                                     | -        |
| max        | 最大长度                                                                             | number                                     | -        |
| message    | 校验文案                                                                             | string                                     | -        |
| min        | 最小长度                                                                             | number                                     | -        |
| pattern    | 正则表达式校验                                                                          | RegExp                                     | -        |
| required   | 是否必选                                                                             | boolean                                    | `false`  |
| transform  | 校验前转换字段值                                                                         | function(value) => transformedValue:any    | -        |
| type       | 内建校验类型，[可选项](https://github.com/yiminghe/async-validator#type)                   | string                                     | 'string' |
| validator  | 自定义校验（注意，[callback 必须被调用](https://github.com/ant-design/ant-design/issues/5155)） | function(rule, value, callback)            | -        |
| whitespace | 必选时，空格是否会被视为错误                                                                   | boolean                                    | `false`  |

更多高级用法可研究 [async-validator](https://github.com/yiminghe/async-validator)
，用法同 [ant-design-vue](https://next.antdv.com/components/form-cn#API)

## Events

| 事件名称                | 说明                                                                                                                                               | 参数                                       |
|:--------------------|:-------------------------------------------------------------------------------------------------------------------------------------------------|:-----------------------------------------|
| insert              | 插入数据。参数`row`代表 表格数据中的某一行，不填的话，在第一行新增；填`-1`在最后一行新增；填表格数据某一行，在对应行新增。参数`length`代表添加的行数。                                                             | Function(row = -1, length = 1)           |
| remove              | 删除选中的行数据                                                                                                                                         |                                          |
| update              | 更新`dataSource`数据源（一般不使用）                                                                                                                         |                                          |
| reloadData          | 重新加载表格数据                                                                                                                                         | Function(data)                           |
| getTableData        | 获取表格的数据 { `footerData:[]`,`fullData:[]`,`tableData:[]`,`visibleData:[]` }                                                                        |                                          |
| getTableDataNoEmpty | 获取表格非空的数据 { `footerData:[]`,`fullData:[]`,`tableData:[]`,`visibleData:[]` }                                                                      |                                          |
| getSelect           | 获取表格的选中数据                                                                                                                                        |                                          |
| getRecordSet        | 获取表格变动数据 { `insertRecords:[]`,`removeRecords:[]`,`updateRecords:[]` }                                                                            |                                          |
| setActiveCell       | 设置表格激活的单元格。参数`row`代表表格数据中的某一行，参数`key`代表对应列的字段。                                                                                                   | Function(row,key)                        |
| validateAll         | 根据规则`rules`校验表格全部内容，返回`Promise`对象                                                                                                                |                                          |
| onKeyupToNext       | 当内部编辑输入框点击`Enter`按键时，自动跳转到下一列，当在最后一列，自动新增一行空数据。参数`nextKey`为跳转对应的字段值，当设置为`nextLine`时跳转到下一行或新增一行；`row`表示当前行数据，通过插槽获取；`rowIndex`表示当前行对应 的行数，通过插槽获取。 | Function($event, nextKey, row, rowIndex) |
| onInputChange       | 输入框编辑内容更改时的事件                                                                                                                                    | Function(e, key, row, rowIndex)          |