使用vue+element ui实现走马灯切换预览表格数据
目录
- 1. 需求分析
- 2. 效果演示
- 3. 代码实现
- 3.1 table.json
- 3.2 HTML 代码
- 3.3 Script 代码
- 总结
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切换预览表格数据内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
赞 (0)
相关推荐
-
element-ui实现表格边框的动态切换并防抖
目录 需求 实现过程 解决抖动 抖动原因 解决抖动的实现过程 再优化 后记 固定列 需求 需求是这样的: 先前的需求,要求表格按UI设计图来,表格无边框. 新来的需求,要求能支持表格列宽的能够支持拖动. 按照官网,table组件的border属性,设置为true时可以显示边框.有了边框才能拖. 但是显示了边框,与之前的需求相悖.同时,既然显示边框有属性border支持,那么动态的更新border的值,应该就可以实现显示表格边框的动态切换. 基于此思路,采用比较折中的办法: 默认状态下不显示边框
-
使用vue+element ui实现走马灯切换预览表格数据
目录 1. 需求分析 2. 效果演示 3. 代码实现 3.1 table.json 3.2 HTML 代码 3.3 Script 代码 总结 1. 需求分析 有这样一个 json 文件(table.json),里面包含有多组需要展示的表格数据,需求就是需要将这些数据进行展示,并且能快速查看不同的数据,由于数据过多,不能一个表格一个表格的进行展示,所以找了一个比较合适的方法,就是通过走马灯将所有数据进行渲染,当切换走马灯时,再展示对应的数据. 2. 效果演示 3. 代码实现 3.1 table.j
-
vue element upload实现图片本地预览
vue使用element实现本地预览,最主要的是将图片路径转换为base64,供大家参考,具体内容如下 HTML <el-upload class="avatar-uploader" action="123" //这个路径不重要,可以随便写 :show-file-list="false" :on-success="handleAvatarSuccess" :on-change="onchange" :
-
Vue + Element UI图片上传控件使用详解
上一篇 Vue +Element UI +vue-quill-editor 富文本编辑器及插入图片自定义 主要是写了富文本编辑器的自定义及编辑器中图片的上传并插入到编辑内容,这篇文章单独介绍一下element UI 图片上传控件的使用.首先要安装element并中引入,安装引入过程这里不再赘述. 1.引用element 上传控件. <el-upload action="/mgr/common/imgUpload"//这里需要配置一下文件上传地址(跨域) list-type=&qu
-
vue+element UI实现树形表格
本文实例为大家分享了vue+element UI实现树形表格的具体代码,供大家参考,具体内容如下 一.在component文件夹下新建如下treeTable文件夹,里面有2个文件: eval.js:将数据转换成树形数据 /** * @Author: jianglei * @Date: 2017-10-12 12:06:49 */ 'use strict' import Vue from 'vue' export default function treeToArray(data, expandA
-
Vue + Element UI 实现权限管理系统之菜单功能实现代码
目录 菜单功能实现 菜单接口封装 菜单管理界面 测试效果 源码下载 菜单功能实现 菜单接口封装 菜单管理是一个对菜单树结构的增删改查操作. 提供一个菜单查询接口,查询整颗菜单树形结构. http/modules/menu.js 添加findMenuTree 接口. import axios from '../axios' /* * 菜单管理模块 */ // 保存 export const save = (data) => { return axios({ url: '/menu/save', m
-
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
本文为大家分享了Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义,供大家参考,具体内容如下 1.安装 npm install vue-quill-editor --save 2.在main.js中引入 import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quil
-
在vue+element ui框架里实现lodash的debounce防抖
事情起因在:我使用element ui框架里的远程搜索框,在单选时,组件内部已经做了防抖,query是在一段时间内的字符串.但是在多选时,并没有做防抖,而是每输入一个字符都要向后台发一次请求,所以必须防抖,官方推荐使用lodash的debounce 在解决这个问题时,我遇到的坎儿主要有以下: 我首先在项目里用npm安装lodash,先全局安装,然后安装到项目 npm install -g lodash npm install --save lodash 安装后,我就在我要用防抖的组件里,引入lo
-
解决Vue+Element ui开发中碰到的IE问题
IE9样式错乱,IE11无法正常加载v-loading等问题 引入了babel-polyfill插件,依然出现"polyfill-eventsource added missing EventSource to window"的奇怪问题(ie所有版本都有出现) 第一步:安装babel-ployfill (已安装请跳过此步骤) yarn add babel-ployfill 修改webpack打包配置文件:webpack.bash.conf.js // 引入babel-ployfill
-
Vue+Element UI+Lumen实现通用表格分页功能
前言 最近在做一个前后端分离的项目,前端使用 Vue+ Element UI,而后端则使用 Lumen 做接口开发,其中分页是必不可少的一部分,本文就介绍如何基于以上环境做一个简单.可复用的分页功能. 先说后端 后端做的事情不多,只需要接受几个参数,根据参数来获取数据即可. 需要获取的参数如下: pageSize(一页数据的数量) pageIndex(第几页的数据) 然后就可以根据这两个参数计算出偏移量,再从数据库中取出相应的数据. 假如现在给出的参数为:pageSize=10,pageInde
-
解决vue+ element ui 表单验证有值但验证失败问题
一.如图:有值但是验证失败 二. <el-form :model="form" :rules="rules"> <el-form-item label="数据模板" prop="template" > <el-col :span="20"> <el-input type="textarea" v-model="form.template