vue-easytable

If you do not explicitly set a width for the ve-table component, it defaults to style="width:100%;". This allows the table to automatically expand to fill its container.

<template>
    <ve-table :columns="columns" :table-data="tableData" />
</template>

<script>
    export default {
        data() {
            return {
                columns: [
                    { field: "name", key: "a", title: "Name", width: 100 },
                    { field: "date", key: "b", title: "Tel", width: 200 },
                    { field: "hobby", key: "c", title: "Hobby", width: 300 },
                    { field: "address", key: "d", title: "Address", width: 300 },
                ],
                tableData: [
                    {
                        name: "John",
                        date: "1900-05-20",
                        hobby: "coding and coding repeat",
                        address: "No.1 Century Avenue, Shanghai",
                    },
                    {
                        name: "Dickerson",
                        date: "1910-06-20",
                        hobby: "coding and coding repeat",
                        address: "No.1 Century Avenue, Beijing",
                    },
                    {
                        name: "Larsen",
                        date: "2000-07-20",
                        hobby: "coding and coding repeat",
                        address: "No.1 Century Avenue, Chongqing",
                    },
                    {
                        name: "Geneva",
                        date: "2010-08-20",
                        hobby: "coding and coding repeat",
                        address: "No.1 Century Avenue, Xiamen",
                    },
                    {
                        name: "Jami",
                        date: "2020-09-20",
                        hobby: "coding and coding repeat",
                        address: "No.1 Century Avenue, Shenzhen",
                    },
                ],
            };
        },
    };
</script>

When using virtual-scroll-option in ve-table, the rowIndex provided by the renderBodyCell method refers to the index within the currently rendered chunk, not the absolute index in the entire dataset. To display the correct, continuous row number (especially when filtering or using server-side data), you must combine the rowIndex from renderBodyCell with the startRowIndex captured from the scrolling event.

Formula for real sequence number: rowIndex + startRowIndex + 1

Steps to implement:

1. Enable virtual scrolling in :virtual-scroll-option.
2. Define a scrolling callback to capture the current startRowIndex.
3. Use renderBodyCell in your column definition to calculate and return the real index.

<template>
    <div>
        <el-input style="width:250px" v-model="searchValue" placeholder="search name"></el-input>
        <el-button type="primary" @click="search">Search</el-button>
        <br />
        <br />
        <ve-table
            :max-height="500"
            :virtual-scroll-option="virtualScrollOption"
            :columns="columns"
            :table-data="tableData"
            row-key-field-name="rowKey"
        />
    </div
</template>

<script>
    import Mock from "mockjs";
    export default {
        data() {
            return {
                searchValue: "",
                startRowIndex: 0,
                virtualScrollOption: {
                    enable: true,
                    scrolling: this.scrolling,
                },
                columns: [
                    {
                        field: "index",
                        key: "index",
                        title: "#",
                        width: 200,
                        align: "left",
                        renderBodyCell: this.renderRowIndex,
                    },
                    // ... other columns
                ],
                tableData: [],
                sourceData: [],
            };
        },
        methods: {
            // Capture the start index of the currently rendered block
            scrolling({
                startRowIndex,
                visibleStartIndex,
                visibleEndIndex,
                visibleAboveCount,
                visibleBelowCount,
            }) {
                this.startRowIndex = startRowIndex;
            },
            // Calculate the real index using the captured startRowIndex
            renderRowIndex({ row, column, rowIndex }) {
                return (
                    <span class="text-bold" style="color:#1890ff;">
                        {rowIndex + this.startRowIndex + 1}
                    </span>
                );
            },
            // ... other methods
        },
        created() {
            this.initData();
        },
    };
</script>

You can control which rows are expanded by default in a ve-table using the expand-option prop.

• Use defaultExpandedRowKeys (an array of keys) to specify specific rows that should be expanded on load.
• Use defaultExpandAllRows: true to expand all rows by default.

Note: Ensure you have set the row-key-field-name prop on the ve-table component to match the unique identifier field in your data (e.g., rowKey). You must also include a column with type: 'expand' in your columns array to display the expansion icons.

<template>
    <ve-table
        style="width:100%"
        :columns="columns"
        :table-data="tableData"
        :expand-option="expandOption"
        row-key-field-name="rowKey"
    />
</template>

<script>
    export default {
        data() {
            return {
                expandOption: {
                    defaultExpandAllRows: false,
                    // Specify keys of rows to be expanded by default
                    defaultExpandedRowKeys: [1001, 1003],
                    // Function to determine if a row is expandable
                    expandable: ({ row, column, rowIndex }) => {
                        if (row["rowKey"] === 1002) {
                            return false;
                        }
                    },
                    // Render function for the expanded content
                    render: ({ row, column, rowIndex }, h) => {
                        return (
                            <p>
                                My name is <span style="color:#1890ff;">{row.name}</span>
                                ,I'm living in {row.address}
                            </p>
                        );
                    },
                },
                columns: [
                    {
                        field: "",
                        key: "a",
                        // Column type must be 'expand' to show the icon
                        type: "expand",
                        title: "",
                        width: 50,
                        align: "center",
                    },
                    // ... other columns
                ],
                tableData: [
                    { rowKey: 1001, name: "John", address: "No.1 Century Avenue, Shanghai" },
                    { rowKey: 1002, name: "Dickerson", address: "No.1 Century Avenue, Beijing" },
                    // ... other data
                ],
            };
        },
    };
</script>