使用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í)，再展示對應(yīng)的數(shù)據(jù)。
2. 效果演示
3. 代碼實(shí)現(xiàn)
3.1 table.json
由于數(shù)據(jù)太多，這邊只截取部分進(jìn)行測試。
{
"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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- vue(element ui)el-table樹形表格展示以及數(shù)據(jù)對齊方式
- 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中$emit的用法詳解,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
關(guān)于vue 的slot分發(fā)內(nèi)容 (多個(gè)分發(fā))
這篇文章主要介紹了關(guān)于vue 的slot分發(fā)內(nèi)容 (多個(gè)分發(fā))，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
Vue ECharts設(shè)置主題實(shí)現(xiàn)方法介紹
這篇文章主要介紹了Vue ECharts設(shè)置主題，本文通過實(shí)例代碼圖文相結(jié)合給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
Vue.js原理分析之nextTick實(shí)現(xiàn)詳解
這篇文章主要給大家介紹了關(guān)于Vue.js原理分析之nextTick實(shí)現(xiàn)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
在vue中使用echarts實(shí)現(xiàn)上浮與下鉆效果
這篇文章主要介紹了在vue中使用echarts實(shí)現(xiàn)上浮與下鉆效果,本文分步驟給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-11-11
Vue突然報(bào)錯(cuò)doesn‘t?work?properly?without?JavaScript?enabled
最近在做項(xiàng)目的時(shí)候遇到了些問題,所以這篇文章主要給大家介紹了關(guān)于Vue突然報(bào)錯(cuò)doesn‘t?work?properly?without?JavaScript?enabled的解決方法,需要的朋友可以參考下2023-01-01
今天小編就為大家分享一篇vue 中固定導(dǎo)航欄的實(shí)例代碼，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
VUE中路由變化this.$router(push\replace\go\back)解讀
這篇文章主要介紹了VUE中路由變化this.$router(push\replace\go\back),具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue豎向步驟條方式,具有很好的參考價(jià)值,希望對大家有所幫助,2023-12-12
vue-router路由參數(shù)刷新消失的問題解決方法
本篇文章主要介紹了vue-router路由參數(shù)刷新消失的問題解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06