快捷導(dǎo)航

Vue3+Element?Plus實現(xiàn)el-table跨行顯示(非腳手架)

更新時間：2023年09月11日 11:08:47 作者：凌霄玉階非所愿

這篇文章主要介紹了Vue3+Element Plus實現(xiàn)el-table跨行顯示(非腳手架),本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

app組件內(nèi)容

 <div id="app">
        <!-- 遠(yuǎn)程搜索 -->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="任務(wù)名稱：" style="margin-left:30px;">
                <el-select v-model="value" filterable remote clearable reserve-keyword placeholder="Please enter a keyword" :remote-method="remoteMethod" :loading="loading">
                    <el-option v-for="item in options" :key="item.CODE" :label="item.NAME" :value="item.CODE" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查詢</el-button>
            </el-form-item>
        </el-form>
        <!-- 表格數(shù)據(jù) -->
        <el-table :data="tableData" stripe border style="width: 98%;" :span-method="objectSpanMethod" max-height="650">
            <el-table-column fixed prop="CODE" label="編碼" width="60"></el-table-column>
            <el-table-column prop="NAME" label="名稱"></el-table-column>
            <el-table-column prop="FREQUENCY" label="頻次" width="80"></el-table-column>
            <el-table-column prop="FNAME" label="執(zhí)行科室" width="150"></el-table-column>
            <el-table-column prop="FILENAME" label="文件名稱"></el-table-column>
            <el-table-column prop="STATUS" label="狀態(tài)" width="80"></el-table-column>
            <el-table-column prop="CREATEID" label="上傳人" width="80"></el-table-column>
            <el-table-column prop="CREATEDATE" label="上傳時間"></el-table-column>
        </el-table>
    </div>

使用:span-method="objectSpanMethod"自定義方法實現(xiàn)跨行顯示

const objectSpanMethod = ({
                    row,
                    column,
                    rowIndex,
                    columnIndex
                }) => {
                    const columnsToSpan = ['CODE', 'NAME', 'FNAME', 'FREQUENCY']; // 列名數(shù)組
                    if (columnsToSpan.includes(column.property)) {
                        if (rowIndex === 0 || row[column.property] !== tableData.value[rowIndex - 1][column.property]) {
                            // 如果是相同 "NAME" 的第一行，則返回正確的 rowspan 和 colspan
                            let rowspan = 1;
                            for (let i = rowIndex + 1; i < tableData.value.length; i++) {
                                if (tableData.value[i][column.property] === row[column.property]) {
                                    rowspan++;
                                    tableData.value[i]._rowspan = 0; // 隱藏后續(xù)行的 "NAME"
                                } else {
                                    break;
                                }
                            }
                            return {
                                rowspan,
                                colspan: 1
                            };
                        }
                        return {
                            rowspan: 0,
                            colspan: 0
                        }; // 隱藏相同 "NAME" 的后續(xù)行
                    }
                    return {
                        rowspan: 1,
                        colspan: 1
                    };
                }

查詢方法

                const onSubmit = (boolen) => {
                    // 在這里獲取輸入的值
                    const inputValue = value.value;
                    if ((inputValue !== null && inputValue !== undefined && inputValue !== '') || boolen) {
                        // console.log("Input Value:", inputValue);
                        // axios.get(UJCAjaxBaseUrl + "/請求地址", {
                        //     params: {
                        //         TaskId: inputValue
                        //     }
                        // }).then((response) => {
                        //     console.log("response:" + response.data.data);
                        //     tableData.value = response.data.data;
                        //     return true;
                        // }).catch((error) => {
                        //     console.error('發(fā)生錯誤：', error);
                        //     return false;
                        // });
                    } else {
                        showErrorMessage('請搜索并選擇您要查詢的細(xì)則編碼或細(xì)則名稱!');
                        return false;
                    }

初始化掛載

  //初始化掛載
                onMounted(() => {
                    list.value = states.map((item) => {
                        return {
                            value: item
                        };
                    });
                    onSubmit(true);
                });

新建一個html即可進行測試，完整代碼如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 3 回車鍵示例</title>
    <!-- 引入 Vue 3 和 Element Plus -->
    <!-- 包含 Vue 3 庫 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.min.js"></script>
    <!-- 包含 Element Plus 的 CSS 樣式 -->
    <link rel="stylesheet" >
    <!-- 包含 Element Plus 的 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/element-plus@2.3.9/dist/index.full.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.5.0/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <!-- 遠(yuǎn)程搜索 -->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="任務(wù)名稱：" style="margin-left:30px;">
                <el-select v-model="value" filterable remote clearable reserve-keyword placeholder="Please enter a keyword" :remote-method="remoteMethod" :loading="loading">
                    <el-option v-for="item in options" :key="item.CODE" :label="item.NAME" :value="item.CODE" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查詢</el-button>
            </el-form-item>
        </el-form>
        <!-- 表格數(shù)據(jù) -->
        <el-table :data="tableData" stripe border style="width: 98%;" :span-method="objectSpanMethod" max-height="650">
            <el-table-column fixed prop="CODE" label="編碼" width="60"></el-table-column>
            <el-table-column prop="NAME" label="名稱"></el-table-column>
            <el-table-column prop="FREQUENCY" label="頻次" width="80"></el-table-column>
            <el-table-column prop="FNAME" label="執(zhí)行科室" width="150"></el-table-column>
            <el-table-column prop="FILENAME" label="文件名稱"></el-table-column>
            <el-table-column prop="STATUS" label="狀態(tài)" width="80"></el-table-column>
            <el-table-column prop="CREATEID" label="上傳人" width="80"></el-table-column>
            <el-table-column prop="CREATEDATE" label="上傳時間"></el-table-column>
        </el-table>
    </div>
    <script>
        const {
            createApp,
            reactive,
            ref,
            onMounted,
            onBeforeMount,
            onUpdated,
            ElMessage
        } = Vue;
        const vue3DepartFileStatis = {
            setup() {
                //定義響應(yīng)數(shù)據(jù)
                const list = ref([]);
                const options = ref([]);
                const value = ref([]);
                const loading = ref(false);
                const tableData = ref([]); //表格響應(yīng)式
                let formInline = reactive({
                    keyword: ""
                });
                const isMessageShowing = ref(false);
                //初始化掛載
                onMounted(() => {
                    list.value = states.map((item) => {
                        return {
                            value: item
                        };
                    });
                    onSubmit(true);
                });
                //遠(yuǎn)程搜索
                const remoteMethod = (query) => {
                    //if (query) {
                    //    loading.value = true;
                    //    setTimeout(() => {
                    //        loading.value = false;
                    //        options.value = list.value.filter((item) => {
                    //            return item.value.toLowerCase().includes(query.toLowerCase())
                    //        });
                    //    }, 200);
                    //} else {
                    //    options.value = [];
                    //}
                    if (query) {
                        loading.value = true;
                        console.log(query);
                        // 發(fā)送 Axios 請求
                        axios.get(UJCAjaxBaseUrl + "/請求地址", {
                            params: {
                                TaskName: query
                            }
                        }).then((response) => {
                            loading.value = false;
                            options.value = response.data.data;
                            console.log(response.data.data);
                        }).catch((error) => {
                            console.error('發(fā)生錯誤：', error);
                            loading.value = false;
                        });
                    } else {
                        options.value = [];
                    }
                }
                //封裝錯誤提示
                const showErrorMessage = (message = 'Oops, this is a error message.') => {
                    if (!isMessageShowing.value) {
                        isMessageShowing.value = true;
                        ElementPlus.ElMessage({
                            showClose: true,
                            message: message,
                            type: 'error',
                            onClose: () => {
                                isMessageShowing.value = false;
                            },
                        });
                    }
                };
                //查詢
                const onSubmit = (boolen) => {
                    // 在這里獲取輸入的值
                    const inputValue = value.value;
                    if ((inputValue !== null && inputValue !== undefined && inputValue !== '') || boolen) {
                        // console.log("Input Value:", inputValue);
                        // axios.get(UJCAjaxBaseUrl + "/請求地址", {
                        //     params: {
                        //         TaskId: inputValue
                        //     }
                        // }).then((response) => {
                        //     console.log("response:" + response.data.data);
                        //     tableData.value = response.data.data;
                        //     return true;
                        // }).catch((error) => {
                        //     console.error('發(fā)生錯誤：', error);
                        //     return false;
                        // });
                    } else {
                        showErrorMessage('請搜索并選擇您要查詢的細(xì)則編碼或細(xì)則名稱!');
                        return false;
                    }
                    //模擬數(shù)據(jù)
                    tableData.value = [{
                        CODE: '001',
                        NAME: 'Item A',
                        FREQUENCY: 'Daily',
                        FNAME: 'Department A',
                        FILENAME: 'File A',
                        STATUS: 'Active',
                        CREATEID: 'User 1',
                        CREATEDATE: '2023-09-06'
                    }, {
                        CODE: '002',
                        NAME: 'Item A',
                        FREQUENCY: 'Weekly',
                        FNAME: 'Department B',
                        FILENAME: 'File B',
                        STATUS: 'Inactive',
                        CREATEID: 'User 2',
                        CREATEDATE: '2023-09-07'
                    }, {
                        CODE: '003',
                        NAME: 'Item B',
                        FREQUENCY: 'Monthly',
                        FNAME: 'Department C',
                        FILENAME: 'File C',
                        STATUS: 'Active',
                        CREATEID: 'User 3',
                        CREATEDATE: '2023-09-08'
                    }, {
                        CODE: '004',
                        NAME: 'Item B',
                        FREQUENCY: 'Daily',
                        FNAME: 'Department A',
                        FILENAME: 'File D',
                        STATUS: 'Inactive',
                        CREATEID: 'User 4',
                        CREATEDATE: '2023-09-09'
                    }]
                }
                //模擬數(shù)據(jù)
                const states = [];
                const objectSpanMethod = ({
                    row,
                    column,
                    rowIndex,
                    columnIndex
                }) => {
                    const columnsToSpan = ['CODE', 'NAME', 'FNAME', 'FREQUENCY']; // 列名數(shù)組
                    if (columnsToSpan.includes(column.property)) {
                        if (rowIndex === 0 || row[column.property] !== tableData.value[rowIndex - 1][column.property]) {
                            // 如果是相同 "NAME" 的第一行，則返回正確的 rowspan 和 colspan
                            let rowspan = 1;
                            for (let i = rowIndex + 1; i < tableData.value.length; i++) {
                                if (tableData.value[i][column.property] === row[column.property]) {
                                    rowspan++;
                                    tableData.value[i]._rowspan = 0; // 隱藏后續(xù)行的 "NAME"
                                } else {
                                    break;
                                }
                            }
                            return {
                                rowspan,
                                colspan: 1
                            };
                        }
                        return {
                            rowspan: 0,
                            colspan: 0
                        }; // 隱藏相同 "NAME" 的后續(xù)行
                    }
                    return {
                        rowspan: 1,
                        colspan: 1
                    };
                }
                return {
                    list,
                    options,
                    value,
                    loading,
                    remoteMethod,
                    onSubmit,
                    tableData,
                    formInline,
                    objectSpanMethod
                }
            }
        }
        createApp(vue3DepartFileStatis)
            .use(ElementPlus).mount("#app"); // 掛載應(yīng)用到指定元素上
    </script>
</body>
</html>

效果圖

在這里插入圖片描述

到此這篇關(guān)于Vue3+Element Plus實現(xiàn)el-table跨行顯示（非腳手架）的文章就介紹到這了,更多相關(guān)Vue3+Element Plus el-table跨行顯示內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: