使用vue+element ui实现走马灯切换预览表格数据

 更新时间:2022年08月05日 10:01:02   作者:巨蟹座不吃鱼  
这次做项目的时候遇到需要切换预览表格数据的需求,所以下面这篇文章主要给大家介绍了关于使用vue+element ui实现走马灯切换预览表格数据的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

1. 需求分析

有这样一个 json 文件(table.json),里面包含有多组需要展示的表格数据,需求就是需要将这些数据进行展示,并且能快速查看不同的数据,由于数据过多,不能一个表格一个表格的进行展示,所以找了一个比较合适的方法,就是通过走马灯将所有数据进行渲染,当切换走马灯时,再展示对应的数据。

2. 效果演示

3. 代码实现

3.1 table.json

由于数据太多,这边只截取部分进行测试。

{
    "TAG11": {
        "table1": [
            {
                "参数": "num1",
                "值": "3"
            },
            {
                "参数": "num2",
                "值": "110.055"
            },
            {
                "参数": "num3",
                "值": 8
            },
            {
                "参数": "num4",
                "值": 0.2
            },
            {
                "参数": "num5",
                "值": "10"
            },
            {
                "参数": "num6",
                "值": "7"
            },
            {
                "参数": "num7",
                "值": "0"
            },
            {
                "参数": "num8",
                "值": "1"
            },
            {
                "参数": "num9",
                "值": "2"
            },
            {
                "参数": "num10",
                "值": "-1"
            },
            {
                "参数": "num11",
                "值": 819.144
            },
            {
                "参数": "num12",
                "值": "650"
            },
            {
                "参数": "num13",
                "值": "50"
            }
        ],
        "table2": [
            {
                "name": "11a_a01",
                "parameter1": 2.5,
                "parameter2": -8,
                "parameter3": 0.3588,
                "parameter4": 0.28704,
                "parameter5": 0.1794,
                "parameter6": 1
            },
            {
                "name": "11a_a02",
                "parameter1": 2.5,
                "parameter2": -8,
                "parameter3": 0.3588,
                "parameter4": 0.28704,
                "parameter5": 0.1794,
                "parameter6": 2
            },
            {
                "name": "11a_b03",
                "parameter1": 2.5,
                "parameter2": 0,
                "parameter3": 0.3588,
                "parameter4": 0.28704,
                "parameter5": 0.1794,
                "parameter6": 3
            },
            {
                "name": "11a_b04",
                "parameter1": 2.5,
                "parameter2": 0,
                "parameter3": 0.3588,
                "parameter4": 0.28704,
                "parameter5": 0.1794,
                "parameter6": 4
            },
            {
                "name": "11a_c05",
                "parameter1": 2.5,
                "parameter2": 8,
                "parameter3": 0.3588,
                "parameter4": 0.28704,
                "parameter5": 0.1794,
                "parameter6": 5
            },
            {
                "name": "11a_c06",
                "parameter1": 2.5,
                "parameter2": 8,
                "parameter3": 0.3588,
                "parameter4": 0.28704,
                "parameter5": 0.1794,
                "parameter6": 6
            },
            {
                "name": "11b_a01",
                "parameter1": 4.5,
                "parameter2": -8,
                "parameter3": 0.239333,
                "parameter4": 0.191466,
                "parameter5": 0.119666,
                "parameter6": 1
            },
            {
                "name": "11b_a02",
                "parameter1": 4.5,
                "parameter2": -8,
                "parameter3": 0.239333,
                "parameter4": 0.191466,
                "parameter5": 0.119666,
                "parameter6": 2
            },
            {
                "name": "11b_b03",
                "parameter1": 4.5,
                "parameter2": 0,
                "parameter3": 0.239333,
                "parameter4": 0.191466,
                "parameter5": 0.119666,
                "parameter6": 3
            },
            {
                "name": "11b_b04",
                "parameter1": 4.5,
                "parameter2": 0,
                "parameter3": 0.239333,
                "parameter4": 0.191466,
                "parameter5": 0.119666,
                "parameter6": 4
            },
            {
                "name": "11b_c05",
                "parameter1": 4.5,
                "parameter2": 8,
                "parameter3": 0.239333,
                "parameter4": 0.191466,
                "parameter5": 0.119666,
                "parameter6": 5
            },
            {
                "name": "11b_c06",
                "parameter1": 4.5,
                "parameter2": 8,
                "parameter3": 0.239333,
                "parameter4": 0.191466,
                "parameter5": 0.119666,
                "parameter6": 6
            },
            {
                "name": "11c_a01",
                "parameter1": 6.5,
                "parameter2": -8,
                "parameter3": 0.193385,
                "parameter4": 0.154708,
                "parameter5": 0.096693,
                "parameter6": 1
            },
            {
                "name": "11c_a02",
                "parameter1": 6.5,
                "parameter2": -8,
                "parameter3": 0.193385,
                "parameter4": 0.154708,
                "parameter5": 0.096693,
                "parameter6": 2
            },
            {
                "name": "11c_b03",
                "parameter1": 6.5,
                "parameter2": 0,
                "parameter3": 0.193385,
                "parameter4": 0.154708,
                "parameter5": 0.096693,
                "parameter6": 3
            },
            {
                "name": "11c_b04",
                "parameter1": 6.5,
                "parameter2": 0,
                "parameter3": 0.193385,
                "parameter4": 0.154708,
                "parameter5": 0.096693,
                "parameter6": 4
            },
            {
                "name": "11c_c05",
                "parameter1": 6.5,
                "parameter2": 8,
                "parameter3": 0.193385,
                "parameter4": 0.154708,
                "parameter5": 0.096693,
                "parameter6": 5
            },
            {
                "name": "11c_c06",
                "parameter1": 6.5,
                "parameter2": 8,
                "parameter3": 0.193385,
                "parameter4": 0.154708,
                "parameter5": 0.096693,
                "parameter6": 6
            }
        ],
        "title": "TAG11相关表格数据",
        "describe": "如何玩转走马灯"
    },
    "TAG12": {
        "table1": [
            {
                "参数": "num1",
                "值": "3"
            },
            {
                "参数": "num2",
                "值": "110.055"
            },
            {
                "参数": "num3",
                "值": 8
            },
            {
                "参数": "num4",
                "值": 0.2
            },
            {
                "参数": "num5",
                "值": "10"
            },
            {
                "参数": "num6",
                "值": "7"
            },
            {
                "参数": "num7",
                "值": "0"
            },
            {
                "参数": "num8",
                "值": "1"
            },
            {
                "参数": "num9",
                "值": "2"
            },
            {
                "参数": "num10",
                "值": "-1"
            },
            {
                "参数": "num11",
                "值": 819.144
            },
            {
                "参数": "num12",
                "值": "650"
            },
            {
                "参数": "num13",
                "值": "50"
            }
        ],
        "table2": [
            {
                "name": "12a-a01",
                "parameter1": 2.5,
                "parameter2": -8,
                "parameter3": 0.3588,
                "parameter4": 0.28704,
                "parameter5": 0.1794,
                "parameter6": 1
            },
            {
                "name": "12a-a02",
                "parameter1": 2.5,
                "parameter2": -8,
                "parameter3": 0.3588,
                "parameter4": 0.28704,
                "parameter5": 0.1794,
                "parameter6": 2
            },
            {
                "name": "12a-b03",
                "parameter1": 2.5,
                "parameter2": 0,
                "parameter3": 0.3588,
                "parameter4": 0.28704,
                "parameter5": 0.1794,
                "parameter6": 3
            },
            {
                "name": "12a-b04",
                "parameter1": 2.5,
                "parameter2": 0,
                "parameter3": 0.3588,
                "parameter4": 0.28704,
                "parameter5": 0.1794,
                "parameter6": 4
            },
            {
                "name": "12a-c05",
                "parameter1": 2.5,
                "parameter2": 8,
                "parameter3": 0.3588,
                "parameter4": 0.28704,
                "parameter5": 0.1794,
                "parameter6": 5
            },
            {
                "name": "12a-c06",
                "parameter1": 2.5,
                "parameter2": 8,
                "parameter3": 0.3588,
                "parameter4": 0.28704,
                "parameter5": 0.1794,
                "parameter6": 6
            },
            {
                "name": "12b-a01",
                "parameter1": 4.5,
                "parameter2": -8,
                "parameter3": 0.239333,
                "parameter4": 0.191466,
                "parameter5": 0.119666,
                "parameter6": 1
            },
            {
                "name": "12b-a02",
                "parameter1": 4.5,
                "parameter2": -8,
                "parameter3": 0.239333,
                "parameter4": 0.191466,
                "parameter5": 0.119666,
                "parameter6": 2
            },
            {
                "name": "12b-b03",
                "parameter1": 4.5,
                "parameter2": 0,
                "parameter3": 0.239333,
                "parameter4": 0.191466,
                "parameter5": 0.119666,
                "parameter6": 3
            },
            {
                "name": "12b-b04",
                "parameter1": 4.5,
                "parameter2": 0,
                "parameter3": 0.239333,
                "parameter4": 0.191466,
                "parameter5": 0.119666,
                "parameter6": 4
            },
            {
                "name": "12b-c05",
                "parameter1": 4.5,
                "parameter2": 8,
                "parameter3": 0.239333,
                "parameter4": 0.191466,
                "parameter5": 0.119666,
                "parameter6": 5
            },
            {
                "name": "12b-c06",
                "parameter1": 4.5,
                "parameter2": 8,
                "parameter3": 0.239333,
                "parameter4": 0.191466,
                "parameter5": 0.119666,
                "parameter6": 6
            },
            {
                "name": "12c-a01",
                "parameter1": 6.5,
                "parameter2": -8,
                "parameter3": 0.193385,
                "parameter4": 0.154708,
                "parameter5": 0.096693,
                "parameter6": 1
            },
            {
                "name": "12c-a02",
                "parameter1": 6.5,
                "parameter2": -8,
                "parameter3": 0.193385,
                "parameter4": 0.154708,
                "parameter5": 0.096693,
                "parameter6": 2
            },
            {
                "name": "12c-b03",
                "parameter1": 6.5,
                "parameter2": 0,
                "parameter3": 0.193385,
                "parameter4": 0.154708,
                "parameter5": 0.096693,
                "parameter6": 3
            },
            {
                "name": "12c-b04",
                "parameter1": 6.5,
                "parameter2": 0,
                "parameter3": 0.193385,
                "parameter4": 0.154708,
                "parameter5": 0.096693,
                "parameter6": 4
            },
            {
                "name": "12c-c05",
                "parameter1": 6.5,
                "parameter2": 8,
                "parameter3": 0.193385,
                "parameter4": 0.154708,
                "parameter5": 0.096693,
                "parameter6": 5
            },
            {
                "name": "12c-c06",
                "parameter1": 6.5,
                "parameter2": 8,
                "parameter3": 0.193385,
                "parameter4": 0.154708,
                "parameter5": 0.096693,
                "parameter6": 6
            },
            {
                "name": "12d-a01",
                "parameter1": 8.5,
                "parameter2": -8,
                "parameter3": 0.169059,
                "parameter4": 0.135247,
                "parameter5": 0.084529,
                "parameter6": 1
            },
            {
                "name": "12d-a02",
                "parameter1": 8.5,
                "parameter2": -8,
                "parameter3": 0.169059,
                "parameter4": 0.135247,
                "parameter5": 0.084529,
                "parameter6": 2
            },
            {
                "name": "12d-b03",
                "parameter1": 8.5,
                "parameter2": 0,
                "parameter3": 0.169059,
                "parameter4": 0.135247,
                "parameter5": 0.084529,
                "parameter6": 3
            }
        ],
        "title": "TAG12相关表格数据",
        "describe": "如何玩转走马灯"
    },
    "TAG13": {
        "table1": [
            {
                "参数": "num1",
                "值": "3"
            },
            {
                "参数": "num2",
                "值": "110.055"
            },
            {
                "参数": "num3",
                "值": 8
            },
            {
                "参数": "num4",
                "值": 0.2
            },
            {
                "参数": "num5",
                "值": "10"
            },
            {
                "参数": "num6",
                "值": "7"
            },
            {
                "参数": "num7",
                "值": "0"
            },
            {
                "参数": "num8",
                "值": "1"
            },
            {
                "参数": "num9",
                "值": "2"
            },
            {
                "参数": "num10",
                "值": "-1"
            },
            {
                "参数": "num11",
                "值": 819.144
            },
            {
                "参数": "num12",
                "值": "650"
            },
            {
                "参数": "num13",
                "值": "50"
            }
        ],
        "table2": [
            {
                "name": "121a-a01",
                "parameter1": 2.5,
                "parameter2": -8,
                "parameter3": 0.10764,
                "parameter4": 0.086112,
                "parameter5": 0.05382,
                "parameter6": 1
            },
            {
                "name": "121a-a02",
                "parameter1": 2.5,
                "parameter2": -8,
                "parameter3": 0.10764,
                "parameter4": 0.086112,
                "parameter5": 0.05382,
                "parameter6": 2
            },
            {
                "name": "121a-b03",
                "parameter1": 2.5,
                "parameter2": 0,
                "parameter3": 0.10764,
                "parameter4": 0.086112,
                "parameter5": 0.05382,
                "parameter6": 3
            },
            {
                "name": "121a-b04",
                "parameter1": 2.5,
                "parameter2": 0,
                "parameter3": 0.10764,
                "parameter4": 0.086112,
                "parameter5": 0.05382,
                "parameter6": 4
            },
            {
                "name": "121a-c05",
                "parameter1": 2.5,
                "parameter2": 8,
                "parameter3": 0.10764,
                "parameter4": 0.086112,
                "parameter5": 0.05382,
                "parameter6": 5
            },
            {
                "name": "121a-c06",
                "parameter1": 2.5,
                "parameter2": 8,
                "parameter3": 0.10764,
                "parameter4": 0.086112,
                "parameter5": 0.05382,
                "parameter6": 6
            },
            {
                "name": "121b-a01",
                "parameter1": 4.5,
                "parameter2": -8,
                "parameter3": 0.0718,
                "parameter4": 0.05744,
                "parameter5": 0.0359,
                "parameter6": 1
            },
            {
                "name": "121b-a02",
                "parameter1": 4.5,
                "parameter2": -8,
                "parameter3": 0.0718,
                "parameter4": 0.05744,
                "parameter5": 0.0359,
                "parameter6": 2
            },
            {
                "name": "121b-b03",
                "parameter1": 4.5,
                "parameter2": 0,
                "parameter3": 0.0718,
                "parameter4": 0.05744,
                "parameter5": 0.0359,
                "parameter6": 3
            },
            {
                "name": "121b-b04",
                "parameter1": 4.5,
                "parameter2": 0,
                "parameter3": 0.0718,
                "parameter4": 0.05744,
                "parameter5": 0.0359,
                "parameter6": 4
            },
            {
                "name": "121b-c05",
                "parameter1": 4.5,
                "parameter2": 8,
                "parameter3": 0.0718,
                "parameter4": 0.05744,
                "parameter5": 0.0359,
                "parameter6": 5
            },
            {
                "name": "121b-c06",
                "parameter1": 4.5,
                "parameter2": 8,
                "parameter3": 0.0718,
                "parameter4": 0.05744,
                "parameter5": 0.0359,
                "parameter6": 6
            },
            {
                "name": "121c-a01",
                "parameter1": 6.5,
                "parameter2": -8,
                "parameter3": 0.058015,
                "parameter4": 0.046412,
                "parameter5": 0.029007,
                "parameter6": 1
            },
            {
                "name": "121c-a02",
                "parameter1": 6.5,
                "parameter2": -8,
                "parameter3": 0.058015,
                "parameter4": 0.046412,
                "parameter5": 0.029007,
                "parameter6": 2
            },
            {
                "name": "121c-b03",
                "parameter1": 6.5,
                "parameter2": 0,
                "parameter3": 0.058015,
                "parameter4": 0.046412,
                "parameter5": 0.029007,
                "parameter6": 3
            }
        ],
        "title": "TAG13相关表格数据",
        "describe": "如何玩转走马灯"
    },
    "TAG14": {
        "table1": [
            {
                "参数": "num1",
                "值": "3"
            },
            {
                "参数": "num2",
                "值": "110.055"
            },
            {
                "参数": "num3",
                "值": 8
            },
            {
                "参数": "num4",
                "值": 0.2
            },
            {
                "参数": "num5",
                "值": "10"
            },
            {
                "参数": "num6",
                "值": "7"
            },
            {
                "参数": "num7",
                "值": "0"
            },
            {
                "参数": "num8",
                "值": "1"
            },
            {
                "参数": "num9",
                "值": "2"
            },
            {
                "参数": "num10",
                "值": "-1"
            },
            {
                "参数": "num11",
                "值": 819.144
            },
            {
                "参数": "num12",
                "值": "650"
            },
            {
                "参数": "num13",
                "值": "50"
            }
        ],
        "table2": [
            {
                "name": "13a-a01",
                "parameter1": 2.5,
                "parameter2": -8,
                "parameter3": 0.826944,
                "parameter4": 0.661555,
                "parameter5": 0.413472,
                "parameter6": 1
            },
            {
                "name": "13a-a02",
                "parameter1": 2.5,
                "parameter2": -8,
                "parameter3": 0.826944,
                "parameter4": 0.661555,
                "parameter5": 0.413472,
                "parameter6": 2
            },
            {
                "name": "13a-b03",
                "parameter1": 2.5,
                "parameter2": 0,
                "parameter3": 0.826944,
                "parameter4": 0.661555,
                "parameter5": 0.413472,
                "parameter6": 3
            },
            {
                "name": "13a-b04",
                "parameter1": 2.5,
                "parameter2": 0,
                "parameter3": 0.826944,
                "parameter4": 0.661555,
                "parameter5": 0.413472,
                "parameter6": 4
            },
            {
                "name": "13a-c05",
                "parameter1": 2.5,
                "parameter2": 8,
                "parameter3": 0.826944,
                "parameter4": 0.661555,
                "parameter5": 0.413472,
                "parameter6": 5
            },
            {
                "name": "13a-c06",
                "parameter1": 2.5,
                "parameter2": 8,
                "parameter3": 0.826944,
                "parameter4": 0.661555,
                "parameter5": 0.413472,
                "parameter6": 6
            },
            {
                "name": "13b-a01",
                "parameter1": 4.5,
                "parameter2": -8,
                "parameter3": 0.486293,
                "parameter4": 0.389034,
                "parameter5": 0.243146,
                "parameter6": 1
            },
            {
                "name": "13b-a02",
                "parameter1": 4.5,
                "parameter2": -8,
                "parameter3": 0.486293,
                "parameter4": 0.389034,
                "parameter5": 0.243146,
                "parameter6": 2
            },
            {
                "name": "13b-b03",
                "parameter1": 4.5,
                "parameter2": 0,
                "parameter3": 0.486293,
                "parameter4": 0.389034,
                "parameter5": 0.243146,
                "parameter6": 3
            },
            {
                "name": "13b-b04",
                "parameter1": 4.5,
                "parameter2": 0,
                "parameter3": 0.486293,
                "parameter4": 0.389034,
                "parameter5": 0.243146,
                "parameter6": 4
            },
            {
                "name": "13b-c05",
                "parameter1": 4.5,
                "parameter2": 8,
                "parameter3": 0.486293,
                "parameter4": 0.389034,
                "parameter5": 0.243146,
                "parameter6": 5
            },
            {
                "name": "13b-c06",
                "parameter1": 4.5,
                "parameter2": 8,
                "parameter3": 0.486293,
                "parameter4": 0.389034,
                "parameter5": 0.243146,
                "parameter6": 6
            }
        ],
        "title": "TAG14相关表格数据",
        "describe": "如何玩转走马灯"
    },
    "TAG15": {
        "table1": [
            {
                "参数": "num1",
                "值": "4"
            },
            {
                "参数": "num2",
                "值": "110.055"
            },
            {
                "参数": "num3",
                "值": 8
            },
            {
                "参数": "num4",
                "值": 0.2
            },
            {
                "参数": "num5",
                "值": "10"
            },
            {
                "参数": "VLamp",
                "值": "15"
            },
            {
                "参数": "TL",
                "值": "10"
            },
            {
                "参数": "Ltype",
                "值": "H"
            },
            {
                "参数": "TD",
                "值": "10"
            },
            {
                "参数": "DIRtype",
                "值": "H"
            },
            {
                "参数": "num9",
                "值": "2"
            },
            {
                "参数": "num10",
                "值": "-1"
            },
            {
                "参数": "num11",
                "值": 819.144
            },
            {
                "参数": "num12",
                "值": "110"
            },
            {
                "参数": "num13",
                "值": "50"
            }
        ],
        "table2": [
            {
                "name": "14aP_a",
                "parameter1": 9.8,
                "parameter2": 73.47,
                "parameter3": 77.41,
                "parameter4": 77.41
            },
            {
                "name": "14aP_b",
                "parameter1": 9.8,
                "parameter2": 73.47,
                "parameter3": 77.95,
                "parameter4": 77.95
            },
            {
                "name": "14aP_c",
                "parameter1": 9.8,
                "parameter2": 73.47,
                "parameter3": 78.48,
                "parameter4": 78.48
            },
            {
                "name": "14aP_d",
                "parameter1": 9.8,
                "parameter2": 73.47,
                "parameter3": 79.02,
                "parameter4": 79.02
            },
            {
                "name": "14aP_e",
                "parameter1": 9.8,
                "parameter2": 73.47,
                "parameter3": 77.41,
                "parameter4": 77.41
            },
            {
                "name": "14aP_f",
                "parameter1": 9.8,
                "parameter2": 73.47,
                "parameter3": 77.95,
                "parameter4": 77.95
            },
            {
                "name": "14aP_g",
                "parameter1": 9.8,
                "parameter2": 73.47,
                "parameter3": 78.48,
                "parameter4": 78.48
            },
            {
                "name": "14aP_h",
                "parameter1": 9.8,
                "parameter2": 73.47,
                "parameter3": 79.02,
                "parameter4": 79.02
            },
            {
                "name": "14aN_a",
                "parameter1": 9.8,
                "parameter2": -73.47,
                "parameter3": 77.41,
                "parameter4": 77.41
            },
            {
                "name": "14aN_b",
                "parameter1": 9.8,
                "parameter2": -73.47,
                "parameter3": 77.95,
                "parameter4": 77.95
            },
            {
                "name": "14aN_c",
                "parameter1": 9.8,
                "parameter2": -73.47,
                "parameter3": 78.48,
                "parameter4": 78.48
            },
            {
                "name": "14aN_d",
                "parameter1": 9.8,
                "parameter2": -73.47,
                "parameter3": 79.02,
                "parameter4": 79.02
            },
            {
                "name": "14aN_e",
                "parameter1": 9.8,
                "parameter2": -73.47,
                "parameter3": 77.41,
                "parameter4": 77.41
            },
            {
                "name": "14aN_f",
                "parameter1": 9.8,
                "parameter2": -73.47,
                "parameter3": 77.95,
                "parameter4": 77.95
            },
            {
                "name": "14aN_g",
                "parameter1": 9.8,
                "parameter2": -73.47,
                "parameter3": 78.48,
                "parameter4": 78.48
            },
            {
                "name": "14aN_h",
                "parameter1": 9.8,
                "parameter2": -73.47,
                "parameter3": 79.02,
                "parameter4": 79.02
            },
            {
                "name": "14bP_a",
                "parameter1": 11.8,
                "parameter2": 61.02,
                "parameter3": 77.41,
                "parameter4": 77.41
            },
            {
                "name": "14bP_b",
                "parameter1": 11.8,
                "parameter2": 61.02,
                "parameter3": 77.95,
                "parameter4": 77.95
            },
            {
                "name": "14bP_c",
                "parameter1": 11.8,
                "parameter2": 61.02,
                "parameter3": 78.48,
                "parameter4": 78.48
            },
            {
                "name": "14bP_d",
                "parameter1": 11.8,
                "parameter2": 61.02,
                "parameter3": 79.02,
                "parameter4": 79.02
            },
            {
                "name": "14bP_e",
                "parameter1": 11.8,
                "parameter2": 61.02,
                "parameter3": 77.41,
                "parameter4": 77.41
            },
            {
                "name": "14bP_f",
                "parameter1": 11.8,
                "parameter2": 61.02,
                "parameter3": 77.95,
                "parameter4": 77.95
            }
        ],
        "title": "TAG15相关表格数据",
        "describe": "如何玩转走马灯"
    }
}

3.2 HTML 代码

<template>
  <div class="app-container">
    <el-carousel
      indicator-position="outside"
      arrow="always"
      :autoplay="false"
      height="700px"
      trigger="click"
      style="padding: 0 10px; margin-top: 10px"
    >
      <el-carousel-item
        v-for="(item, index) in detailTableDatas"
        :key="index"
        :name="index"
        :label="index"
      >
        <div style="color: black; font-size: 16px; text-align: center">
          <div style="margin-bottom: 10px; font-weight: bold; font-size: 17px">{{ item["title"] }}</div>
          <span>{{ item["describe"] }}</span>
        </div>

        <div style="width: 100%;height: auto;display: flex;flex-flow: row wrap;justify-content: space-around;margin-top: 5px;" >
          <div style="width: 67%; padding: 0 10px">
            <el-table :data="item['table2']" border height="600" :cell-style="addClass">
              <el-table-column
                v-for="(combination_item, combination_index) in item['table2'][0]"
                :key="combination_index"
                align="center"
                :label="combination_index"
                :prop="combination_index"
              />
            </el-table>
          </div>

          <div style="width: 30%; padding: 0 10px">
            <el-table :data="item['table1']" border height="600" :cell-style="addClass">
              <el-table-column
                v-for="(fix_item, fix_index) in item['table1'][0]"
                :key="fix_index"
                align="center"
                :label="fix_index"
                :prop="fix_index"
              />
            </el-table>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

3.3 Script 代码

<script>
import allTableDatas from "../../../static/table.json"; //获取本地json
export default {
  name: "App",
  data() {
    return {
      detailTableDatas: {}// 所有幻灯片表格数据
    };
  },

  created() {
    // 获取所有幻灯片表格数据
    this.detailTableDatas = allTableDatas
  },

  methods: {
    addClass({ columnIndex }) {
      // 第一列样式
      if (columnIndex === 0) {
        return {
          fontWeight: 'bold',
          background: '#f0f9eb',
          fontSize: '14px',
          color: '#27a2ff'
        }
      }
    }
  }
}
</script>

总结

到此这篇关于使用vue+element ui实现走马灯切换预览表格数据的文章就介绍到这了,更多相关vue+element ui切换预览表格数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue中$emit的用法详解

    vue中$emit的用法详解

    这篇文章主要介绍了vue中$emit的用法详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-08-08
  • 关于vue 的slot分发内容 (多个分发)

    关于vue 的slot分发内容 (多个分发)

    这篇文章主要介绍了关于vue 的slot分发内容 (多个分发),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • Vue ECharts设置主题实现方法介绍

    Vue ECharts设置主题实现方法介绍

    这篇文章主要介绍了Vue ECharts设置主题,本文通过实例代码图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-12-12
  • Vue.js原理分析之nextTick实现详解

    Vue.js原理分析之nextTick实现详解

    这篇文章主要给大家介绍了关于Vue.js原理分析之nextTick实现的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09
  • 在vue中使用echarts实现上浮与下钻效果

    在vue中使用echarts实现上浮与下钻效果

    这篇文章主要介绍了在vue中使用echarts实现上浮与下钻效果,本文分步骤给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-11-11
  • Vue突然报错doesn‘t work properly without JavaScript enabled的解决方法

    Vue突然报错doesn‘t work properly without JavaScript enabled

    最近在做项目的时候遇到了些问题,所以这篇文章主要给大家介绍了关于Vue突然报错doesn‘t work properly without JavaScript enabled的解决方法,需要的朋友可以参考下
    2023-01-01
  • vue 中固定导航栏的实例代码

    vue 中固定导航栏的实例代码

    今天小编就为大家分享一篇vue 中固定导航栏的实例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • VUE中路由变化this.$router(push\replace\go\back)解读

    VUE中路由变化this.$router(push\replace\go\back)解读

    这篇文章主要介绍了VUE中路由变化this.$router(push\replace\go\back),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue竖向步骤条方式

    vue竖向步骤条方式

    这篇文章主要介绍了vue竖向步骤条方式,具有很好的参考价值,希望对大家有所帮助,
    2023-12-12
  • vue-router路由参数刷新消失的问题解决方法

    vue-router路由参数刷新消失的问题解决方法

    本篇文章主要介绍了vue-router路由参数刷新消失的问题解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06

最新评论