npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@sxliqi/editable-table

v1.0.9

Published

基于vxe-table开发的可编辑表格

Downloads

1

Readme

安装

npm install @sxliqi/editable-table

引入依赖文件

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");

在页面编辑组件


<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 | 表尾的数据获取方法,返回一个二维数组,当showFootertrue时生效。默认为计算合计的方法。 | ({ 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 | 当showFootertrue时,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 | object | { } | | columnProps | vxe-tablecolumn的配置,除了title,field,edit-render均可配置,具体见 vxe-column | 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 | 内建校验类型,可选项 | string | 'string' | | validator | 自定义校验(注意,callback 必须被调用) | function(rule, value, callback) | - | | whitespace | 必选时,空格是否会被视为错误 | boolean | false |

更多高级用法可研究 async-validator ,用法同 ant-design-vue

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) |