欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue表格首列相同數(shù)據(jù)合并實(shí)現(xiàn)方法

 更新時(shí)間:2023年04月20日 11:10:57   作者:愛學(xué)習(xí)de測(cè)試小白  
這篇文章主要介紹了Vue實(shí)現(xiàn)表格首列相同數(shù)據(jù)合并的方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

前言

本篇來學(xué)習(xí)下table表格中合并首列相同數(shù)據(jù)的實(shí)現(xiàn)方法

表格首列相同數(shù)據(jù)合并

1. 添加文件

1.src/views 下新建mergeCell.vue文件,代碼如下:

<template>
  <div id="app">
    <el-table
            :data="tableData"
            :span-method="(param)=>objectSpanMethod(param)"
            style="width: 100%; margin-top: 20px">
            <el-table-column
                prop="type_test"
                label="類型"               
                align='center'>
            </el-table-column>
            <el-table-column
                prop="type_spec"
                label="模塊"
                align='center'
                >
            </el-table-column>
            <el-table-column
                prop="is_execute"
                label="是否執(zhí)行"
                align='center'
               >
                <template slot-scope="scope">
                    <span v-if="scope.row.is_execute == true">已執(zhí)行</span>
                    <span v-if="scope.row.is_execute == false">未執(zhí)行</span>
                </template>
            </el-table-column>
            <el-table-column
                prop="result_status"
                label="結(jié)果"
                align='center'
               >
                <template slot-scope='scope'>
                    <el-tag :type="scope.row.result_status | ResultFilter">
                        {{scope.row.result_status}}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column
                prop="created_at"
                label="創(chuàng)建時(shí)間"
                align='center'
               >
                <template slot-scope="scope">
                {{ scope.row.created_at}}
            </template>
            </el-table-column>
        </el-table>
  </div>
</template>
<script>

export default {
    filters:{
        ResultFilter(status) {
        const ongSteadyMap = {
            SUCCESS: 'success',
            FAILURE: 'danger',
            NA: 'primary',
            ABORTED:'info',
            FAIL:'danger',
            None: 'warning'
      }
      return ongSteadyMap[status]
    },
      },
    data() {
        return {
            tableData:[
                {
                    "id": 1,
                    "created_at": "2023-06-18 11:51:07",
                    "updated_at": "2023-04-18 11:51:07",
                    "type_test": "功能測(cè)試",
                    "type_spec": "登錄",
                    "is_execute": true,
                    "result_status": "SUCCESS"
                },
                {
                    "id": 2,
                    "created_at": "2023-06-18 11:51:07",
                    "updated_at": "2023-06-18 11:51:07",
                    "type_test": "功能測(cè)試",
                    "type_spec": "退出",
                    "cr_id": "",
                    "is_execute": true,
                    "result_status": "SUCCESS"
                },
                {
                    "id": 3,
                    "created_at": "2023-06-18 11:51:07",
                    "updated_at": "2023-06-18 11:51:07",
                    "type_test": "接口測(cè)試",
                    "type_spec": "登錄",
                    "cr_id": "",
                    "is_execute": false,
                    "result_status": "N/A"
                },
                {
                    "id": 4,
                    "created_at": "2023-06-18 11:51:07",
                    "updated_at": "2023-06-18 11:51:07",
                    "type_test": "接口測(cè)試",
                    "type_spec": "退出",
                    "cr_id": "",
                    "is_execute": true,
                    "result_status": "FAIL"
                }
            ]
        };
    },
    methods: {
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            console.log('objectSpanMethod',row, column, rowIndex, columnIndex)
            if (columnIndex === 0) {
                    const _row = this.flitterData(this.tableData).one[rowIndex];
                    const _col = _row > 0 ? 1 : 0;
                    return {
                        rowspan: _row,
                        colspan: _col,
                    };
		    }
        },
        flitterData(arr) {
            // 合并表格第一列
            let spanOneArr = [];
            let concatOne = 0;
            arr.forEach((item, index) => {

                if (index === 0) {
                    spanOneArr.push(1);
                    }
                else {
                    console.log('item',item,index)
                    console.log('arr',arr[index-1])
                    // 這里的type_test是表格綁定的字段,也就是需要合并的字段,根據(jù)自己的需求來改
                    if (item.type_test == arr[index -1].type_test) {
                        // 第一列需合并相同內(nèi)容的判斷條件
                        spanOneArr[concatOne] += 1;
                        spanOneArr.push(0);
                    } else {
                        spanOneArr.push(1);
                        concatOne = index;
                    }

                }
            });
            return {
                one: spanOneArr,
            };
        },
        
    }
};
</script>

2. 添加路徑

在router下添加,如下路徑

{
    path: '/mergeCell',
    component: Layout,
    children: [
      {
        path: 'mergeCell',
        name: 'mergeCell',
        component: () => import('@/views/mergeCell.vue'),
        meta: { title: 'mergeCell', icon: 'form' }
      }
    ]
  },

3. 查看效果

npm run dev 運(yùn)行,效果如下圖

在這里插入圖片描述

到此這篇關(guān)于Vue實(shí)現(xiàn)表格首列相同數(shù)據(jù)合并的文章就介紹到這了,更多相關(guān)vue合并table表格內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 一文徹底教會(huì)你在vue中寫jsx

    一文徹底教會(huì)你在vue中寫jsx

    以前我們經(jīng)常在react中使用jsx,現(xiàn)在我們?cè)趘ue中也是用jsx,下面這篇文章主要給大家介紹了關(guān)于在vue中寫jsx的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-06-06
  • 對(duì)vue 鍵盤回車事件的實(shí)例講解

    對(duì)vue 鍵盤回車事件的實(shí)例講解

    今天小編就為大家分享一篇對(duì)vue 鍵盤回車事件的實(shí)例講解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • vue-router路由懶加載及實(shí)現(xiàn)方式

    vue-router路由懶加載及實(shí)現(xiàn)方式

    這篇文章主要介紹了vue-router路由懶加載及實(shí)現(xiàn)方式,路由懶加載的主要作用是將 路由對(duì)應(yīng)的組件打包成一個(gè)個(gè)的js代碼塊,只有在這個(gè)路由被訪問到的時(shí)候,才會(huì)加載對(duì)應(yīng)組件的代碼塊,需要的朋友可以參考下
    2022-12-12
  • 教你60行代碼實(shí)現(xiàn)一個(gè)迷你響應(yīng)式系統(tǒng)vue

    教你60行代碼實(shí)現(xiàn)一個(gè)迷你響應(yīng)式系統(tǒng)vue

    這篇文章主要為大家介紹了教你60行代碼實(shí)現(xiàn)一個(gè)迷你響應(yīng)式系統(tǒng)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪<BR>
    2023-03-03
  • vue-router4版本第一次打開界面不匹配路由問題解決

    vue-router4版本第一次打開界面不匹配路由問題解決

    本文主要介紹了vue-router4版本第一次打開界面不匹配路由問題解決,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-04-04
  • vue分片上傳視頻并轉(zhuǎn)換為m3u8文件播放的實(shí)現(xiàn)示例

    vue分片上傳視頻并轉(zhuǎn)換為m3u8文件播放的實(shí)現(xiàn)示例

    前端上傳大文件、視頻的時(shí)候會(huì)出現(xiàn)超時(shí)、過大、很慢等情況,為了解決這一問題,跟后端配合做了一個(gè)切片的功能,本文主要介紹了vue分片上傳視頻并轉(zhuǎn)換為m3u8文件播放的實(shí)現(xiàn)示例,感興趣的可以了解一下
    2023-11-11
  • vue跨域問題:Access?to?XMLHttpRequest?at‘httplocalhost解決

    vue跨域問題:Access?to?XMLHttpRequest?at‘httplocalhost解決

    在前端發(fā)出Ajax請(qǐng)求的時(shí)候,有時(shí)候會(huì)產(chǎn)生跨域問題,下面這篇文章主要給大家介紹了關(guān)于vue跨域問題:Access?to?XMLHttpRequest?at‘httplocalhost的解決辦法,需要的朋友可以參考下
    2023-01-01
  • vue滑動(dòng)解鎖組件使用方法詳解

    vue滑動(dòng)解鎖組件使用方法詳解

    這篇文章主要為大家詳細(xì)介紹了vue滑動(dòng)解鎖組件的使用方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-03-03
  • Vue常見報(bào)錯(cuò)整理大全(從此報(bào)錯(cuò)不害怕)

    Vue常見報(bào)錯(cuò)整理大全(從此報(bào)錯(cuò)不害怕)

    寫代碼的過程中一定會(huì)遇到報(bào)錯(cuò),遇到報(bào)錯(cuò)不要擔(dān)心,認(rèn)真分析就可以解決報(bào)錯(cuò),同時(shí)積累經(jīng)驗(yàn),早日成為大牛,這篇文章主要給大家介紹了關(guān)于Vue常見報(bào)錯(cuò)整理的相關(guān)資料,需要的朋友可以參考下
    2022-08-08
  • Vue中使用 ElementUi 的 el-select 實(shí)現(xiàn)全選功能(思路詳解)

    Vue中使用 ElementUi 的 el-select 實(shí)現(xiàn)全選功能(思路詳解

    在開發(fā)中,有一個(gè)需求是 選項(xiàng)組件中使用到一個(gè) 全選的功能,特在這記錄下實(shí)現(xiàn)的方法,方便后續(xù)的查閱,以及方便大家查閱借鑒,對(duì)vue   ElementUi 全選功能感興趣的朋友一起看看吧
    2024-02-02

最新評(píng)論