使用vue+element?ui實(shí)現(xiàn)走馬燈切換預(yù)覽表格數(shù)據(jù)
更新時(shí)間：2022年08月05日 10:01:02 作者：巨蟹座不吃魚
這次做項(xiàng)目的時(shí)候遇到需要切換預(yù)覽表格數(shù)據(jù)的需求,所以下面這篇文章主要給大家介紹了關(guān)于使用vue+element?ui實(shí)現(xiàn)走馬燈切換預(yù)覽表格數(shù)據(jù)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
1. 需求分析
有這樣一個(gè) json 文件（table.json），里面包含有多組需要展示的表格數(shù)據(jù)，需求就是需要將這些數(shù)據(jù)進(jìn)行展示，并且能快速查看不同的數(shù)據(jù)，由于數(shù)據(jù)過多，不能一個(gè)表格一個(gè)表格的進(jìn)行展示，所以找了一個(gè)比較合適的方法，就是通過走馬燈將所有數(shù)據(jù)進(jìn)行渲染，當(dāng)切換走馬燈時(shí)，再展示對(duì)應(yīng)的數(shù)據(jù)。
2. 效果演示
3. 代碼實(shí)現(xiàn)
3.1 table.json
由于數(shù)據(jù)太多，這邊只截取部分進(jìn)行測(cè)試。
{
"TAG11": {
"table1": [
{
"參數(shù)": "num1",
"值": "3"
},
{
"參數(shù)": "num2",
"值": "110.055"
},
{
"參數(shù)": "num3",
"值": 8
},
{
"參數(shù)": "num4",
"值": 0.2
},
{
"參數(shù)": "num5",
"值": "10"
},
{
"參數(shù)": "num6",
"值": "7"
},
{
"參數(shù)": "num7",
"值": "0"
},
{
"參數(shù)": "num8",
"值": "1"
},
{
"參數(shù)": "num9",
"值": "2"
},
{
"參數(shù)": "num10",
"值": "-1"
},
{
"參數(shù)": "num11",
"值": 819.144
},
{
"參數(shù)": "num12",
"值": "650"
},
{
"參數(shù)": "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相關(guān)表格數(shù)據(jù)",
"describe": "如何玩轉(zhuǎn)走馬燈"
},
"TAG12": {
"table1": [
{
"參數(shù)": "num1",
"值": "3"
},
{
"參數(shù)": "num2",
"值": "110.055"
},
{
"參數(shù)": "num3",
"值": 8
},
{
"參數(shù)": "num4",
"值": 0.2
},
{
"參數(shù)": "num5",
"值": "10"
},
{
"參數(shù)": "num6",
"值": "7"
},
{
"參數(shù)": "num7",
"值": "0"
},
{
"參數(shù)": "num8",
"值": "1"
},
{
"參數(shù)": "num9",
"值": "2"
},
{
"參數(shù)": "num10",
"值": "-1"
},
{
"參數(shù)": "num11",
"值": 819.144
},
{
"參數(shù)": "num12",
"值": "650"
},
{
"參數(shù)": "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相關(guān)表格數(shù)據(jù)",
"describe": "如何玩轉(zhuǎn)走馬燈"
},
"TAG13": {
"table1": [
{
"參數(shù)": "num1",
"值": "3"
},
{
"參數(shù)": "num2",
"值": "110.055"
},
{
"參數(shù)": "num3",
"值": 8
},
{
"參數(shù)": "num4",
"值": 0.2
},
{
"參數(shù)": "num5",
"值": "10"
},
{
"參數(shù)": "num6",
"值": "7"
},
{
"參數(shù)": "num7",
"值": "0"
},
{
"參數(shù)": "num8",
"值": "1"
},
{
"參數(shù)": "num9",
"值": "2"
},
{
"參數(shù)": "num10",
"值": "-1"
},
{
"參數(shù)": "num11",
"值": 819.144
},
{
"參數(shù)": "num12",
"值": "650"
},
{
"參數(shù)": "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相關(guān)表格數(shù)據(jù)",
"describe": "如何玩轉(zhuǎn)走馬燈"
},
"TAG14": {
"table1": [
{
"參數(shù)": "num1",
"值": "3"
},
{
"參數(shù)": "num2",
"值": "110.055"
},
{
"參數(shù)": "num3",
"值": 8
},
{
"參數(shù)": "num4",
"值": 0.2
},
{
"參數(shù)": "num5",
"值": "10"
},
{
"參數(shù)": "num6",
"值": "7"
},
{
"參數(shù)": "num7",
"值": "0"
},
{
"參數(shù)": "num8",
"值": "1"
},
{
"參數(shù)": "num9",
"值": "2"
},
{
"參數(shù)": "num10",
"值": "-1"
},
{
"參數(shù)": "num11",
"值": 819.144
},
{
"參數(shù)": "num12",
"值": "650"
},
{
"參數(shù)": "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相關(guān)表格數(shù)據(jù)",
"describe": "如何玩轉(zhuǎn)走馬燈"
},
"TAG15": {
"table1": [
{
"參數(shù)": "num1",
"值": "4"
},
{
"參數(shù)": "num2",
"值": "110.055"
},
{
"參數(shù)": "num3",
"值": 8
},
{
"參數(shù)": "num4",
"值": 0.2
},
{
"參數(shù)": "num5",
"值": "10"
},
{
"參數(shù)": "VLamp",
"值": "15"
},
{
"參數(shù)": "TL",
"值": "10"
},
{
"參數(shù)": "Ltype",
"值": "H"
},
{
"參數(shù)": "TD",
"值": "10"
},
{
"參數(shù)": "DIRtype",
"值": "H"
},
{
"參數(shù)": "num9",
"值": "2"
},
{
"參數(shù)": "num10",
"值": "-1"
},
{
"參數(shù)": "num11",
"值": 819.144
},
{
"參數(shù)": "num12",
"值": "110"
},
{
"參數(shù)": "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相關(guān)表格數(shù)據(jù)",
"describe": "如何玩轉(zhuǎn)走馬燈"
}
}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: {}// 所有幻燈片表格數(shù)據(jù)
};
},
created() {
// 獲取所有幻燈片表格數(shù)據(jù)
this.detailTableDatas = allTableDatas
},
methods: {
addClass({ columnIndex }) {
// 第一列樣式
if (columnIndex === 0) {
return {
fontWeight: 'bold',
background: '#f0f9eb',
fontSize: '14px',
color: '#27a2ff'
}
}
}
}
}
</script>總結(jié)
到此這篇關(guān)于使用vue+element ui實(shí)現(xiàn)走馬燈切換預(yù)覽表格數(shù)據(jù)的文章就介紹到這了,更多相關(guān)vue+element ui切換預(yù)覽表格數(shù)據(jù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- vue(element ui)el-table樹形表格展示以及數(shù)據(jù)對(duì)齊方式
- vue?element?ui表格相同數(shù)據(jù)合并單元格效果實(shí)例
- vue+elementUI顯示表格指定列合計(jì)數(shù)據(jù)方式
- vue elementui表格獲取某行數(shù)據(jù)(slot-scope和selection-change方法使用)
- Vue組件庫ElementUI實(shí)現(xiàn)表格加載樹形數(shù)據(jù)教程
- vue elementUI table表格數(shù)據(jù) 滾動(dòng)懶加載的實(shí)現(xiàn)方法
- vue Element UI 解決表格數(shù)據(jù)不更新問題及解決方案
相關(guān)文章
Vue網(wǎng)絡(luò)請(qǐng)求的三種實(shí)現(xiàn)方式介紹
這篇文章主要介紹了Vue網(wǎng)絡(luò)請(qǐng)求的三種實(shí)現(xiàn)方式，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-09-09
vue打包相關(guān)細(xì)節(jié)整理(小結(jié))
這篇文章主要介紹了vue打包相關(guān)細(xì)節(jié)整理(小結(jié)),小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Vue3設(shè)置Proxy代理解決跨域問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要為大家詳細(xì)介紹了vue自定義數(shù)字輸入框組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
應(yīng)用provide與inject刷新Vue頁面方法
這篇文章主要介紹了應(yīng)用provide與inject刷新Vue頁面的兩種方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，多多進(jìn)步，祝大家早日升職加薪2021-09-09
Vue實(shí)現(xiàn)Base64轉(zhuǎn)png、jpg圖片格式
這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)Base64轉(zhuǎn)png、jpg圖片格式的相關(guān)資料,前段獲取生成的是base64圖片,需要轉(zhuǎn)化為jpg,png,需要的朋友可以參考下2023-09-09
詳解vue中使用transition和animation的實(shí)例代碼
這篇文章主要介紹了詳解vue中使用transition和animation的實(shí)例代碼,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-12-12
vue-router 實(shí)現(xiàn)導(dǎo)航守衛(wèi)（路由衛(wèi)士）的實(shí)例代碼
這篇文章主要介紹了vue-router 實(shí)現(xiàn)導(dǎo)航守衛(wèi)（路由衛(wèi)士）的實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-09
用vue3封裝一個(gè)符合思維且簡(jiǎn)單實(shí)用的彈出層
最近新項(xiàng)目中需要一個(gè)彈窗組件,所以我就做了一個(gè),下面這篇文章主要給大家介紹了關(guān)于如何利用vue3封裝一個(gè)符合思維且簡(jiǎn)單實(shí)用的彈出層,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
Vue3源碼分析組件掛載創(chuàng)建虛擬節(jié)點(diǎn)
這篇文章主要為大家介紹了Vue3源碼分析組件掛載創(chuàng)建虛擬節(jié)點(diǎn)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10