vue制作表格
html部分
{{column.title}} ↑ ↓ | |||||||
|---|---|---|---|---|---|---|---|
| {{row.id}} | {{row.chgstation_name}} | {{row.supheat_name}} | {{row.heatarea}} | {{row.circul_pumps_number}} | {{row.makeup_pumps_number}} | ||
js部分
//表头数据
var column = [{
title: "ID",
name: "id",
sortable: true
}, {
title: "换热站",
name: "chgstation_name",
sortable: false
}, {
title: "供热公司名称",
name: "supheat_name",
sortable: false
}, {
title: "供热面积",
name: "heatarea",
sortable: true
}, {
title: "循环泵数量",
name: "circul_pumps_number",
sortable: true
}, {
title: "补水泵数量",
name: "makeup_pumps_number",
sortable: true
}, {
title: "状态",
name: "state",
sortable: false
}, {
title: "操作",
sortable: false
}];
//json对象
let data = {
"id": 51,
"state": 0,
"address": "",
"chgstation_id": "R1",
"chgstation_name": "种子公司",
"heatarea": 32158,
"other_info": "",
"phone_number": "6666666",
"supheat_id": 2,
"supheat_name": "万全区东阳热力有限公司",
"circul_pumps_number": 3,
"makeup_pumps_number": 3
}
//表格行数据
var dataList = [{
"id": 51,
"state": 0,
"address": "",
"chgstation_id": "R1",
"chgstation_name": "2种子公司",
"heatarea": 32158,
"other_info": "",
"phone_number": "6666666",
"supheat_id": 2,
"supheat_name": "万全区东阳热力有限公司",
"circul_pumps_number": 3,
"makeup_pumps_number": 3
}, {
"id": 52,
"address": "",
"chgstation_id": "R2",
"state": 1,
"chgstation_name": "1种子公司2",
"contact": 0,
"heatarea": 30358,
"other_info": "",
"phone_number": "6666666",
"supheat_id": 2,
"supheat_name": "万全区东阳热力有限公司",
"circul_pumps_number": 2,
"makeup_pumps_number": 6
}, {
"id": 53,
"address": "",
"chgstation_id": "R1",
"state": 0,
"chgstation_name": "5种子公司3",
"heatarea": 30158,
"other_info": "",
"phone_number": "6666666",
"supheat_id": 2,
"supheat_name": "万全区东阳热力有限公司",
"circul_pumps_number": 5,
"makeup_pumps_number": 1
}, {
"id": 54,
"address": "",
"chgstation_id": "R1",
"state": 1,
"chgstation_name": "2种子公司4",
"heatarea": 30138,
"other_info": "",
"phone_number": "6666666",
"supheat_id": 2,
"supheat_name": "万全区东阳热力有限公司",
"circul_pumps_number": 2,
"makeup_pumps_number": 3
}, {
"id": 55,
"address": "",
"chgstation_id": "R1",
"state": 0,
"chgstation_name": "种子公司5",
"heatarea": 30158,
"other_info": "",
"phone_number": "6666666",
"supheat_id": 2,
"supheat_name": "万全区东阳热力有限公司",
"circul_pumps_number": 6,
"makeup_pumps_number": 4
}, {
"id": 56,
"address": "",
"chgstation_id": "R1",
"state": 0,
"chgstation_name": "种子公司6",
"heatarea": 30154,
"other_info": "",
"phone_number": "6666666",
"supheat_id": 2,
"supheat_name": "万全区东阳热力有限公司",
"circul_pumps_number": 3,
"makeup_pumps_number": 5
}, {
"id": 51,
"state": 0,
"address": "",
"chgstation_id": "R1",
"chgstation_name": "种子公司",
"heatarea": 32158,
"other_info": "",
"phone_number": "6666666",
"supheat_id": 2,
"supheat_name": "万全区东阳热力有限公司",
"circul_pumps_number": 3,
"makeup_pumps_number": 3
}, {
"id": 52,
"address": "",
"chgstation_id": "R2",
"state": 1,
"chgstation_name": "种子公司2",
"contact": 0,
"heatarea": 30358,
"other_info": "",
"phone_number": "6666666",
"supheat_id": 2,
"supheat_name": "万全区东阳热力有限公司",
"circul_pumps_number": 2,
"makeup_pumps_number": 6
}, {
"id": 53,
"address": "",
"chgstation_id": "R1",
"state": 0,
"chgstation_name": "种子公司3",
"heatarea": 30158,
"other_info": "",
"phone_number": "6666666",
"supheat_id": 2,
"supheat_name": "万全区东阳热力有限公司",
"circul_pumps_number": 5,
"makeup_pumps_number": 1
}, {
"id": 54,
"address": "",
"chgstation_id": "R1",
"state": 1,
"chgstation_name": "种子公司4",
"heatarea": 30138,
"other_info": "",
"phone_number": "6666666",
"supheat_id": 2,
"supheat_name": "万全区东阳热力有限公司",
"circul_pumps_number": 2,
"makeup_pumps_number": 3
}, {
"id": 55,
"address": "",
"chgstation_id": "R1",
"state": 0,
"chgstation_name": "种子公司5",
"heatarea": 30158,
"other_info": "",
"phone_number": "6666666",
"supheat_id": 2,
"supheat_name": "万全区东阳热力有限公司",
"circul_pumps_number": 6,
"makeup_pumps_number": 4
}, {
"id": 56,
"address": "",
"chgstation_id": "R1",
"state": 0,
"chgstation_name": "种子公司6",
"heatarea": 30154,
"other_info": "",
"phone_number": "6666666",
"supheat_id": 2,
"supheat_name": "万全区东阳热力有限公司",
"circul_pumps_number": 3,
"makeup_pumps_number": 5
}];
css部分
body{
color:#777;
text-align: center;
}
.search{
background: #1588ea;
border-radius: 5px;
height: 40px;
width: 354px;
margin: 40px auto;
color: #fff;
font-family: "黑体";
}
.search span{
font-size: 22px;
position: relative;
top: 2px;
padding: 0 10px;
}
.search input{
height: 34px;
width: 286px;
border: 2px solid #1588EA;
border-radius: 0 5px 5px 0;
}
#customers {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
width: 90%;
border-collapse: collapse;
margin-left: 100px;
margin-top: 40px;
}
#customers td,
#customers th {
font-size: 1em;
border: 1px solid #337ab7;
padding: 3px 7px 2px 7px;
}
#customers th {
font-size: 1.1em;
text-align: left;
padding-top: 5px;
padding-bottom: 4px;
background-color: #1588ea;
color: #ffffff;
}
#customers th a{
border: 1px solid #fdfdfd;
border-radius: 50%;
font-size: 12px;
padding: 0 6px 3px;
color: #ffffff;
text-decoration: none;
}
#customers tr.alt td {
color: #000000;
background-color: #337ab7;
}
td button:nth-child(1){
background: #1588EA;
border: 0px;
width: 80px;
height: 30px;
color: #FFF;
margin: 8px 20px;
}
td button:nth-child(2){
background: #1CA035;
border: 0px;
width: 80px;
height: 30px;
color: #FFF;
margin: 8px 20px;
}
td button:nth-child(3){
background: red;
border: 0px;
width: 80px;
height: 30px;
color: #FFF;
margin: 8px 20px;
}
.tabone {
margin-left: 300px;
}
.page-bar {
height: 40px;
width: 330px;
margin: 40px auto;
padding-left: 40px;
}
ul,
li {
margin: 0px;
padding: 0px;
}
li {
list-style: none
}
.page-bar li:first-child>a {
margin-left: 0px
}
.page-bar a {
border: 1px solid #ddd;
text-decoration: none;
position: relative;
float: left;
padding: 6px 12px;
margin-left: -1px;
line-height: 1.42857143;
color: #337ab7;
cursor: pointer
}
.page-bar a:hover {
background-color: #eee;
}
.page-bar a.banclick {
cursor: not-allowed;
}
.page-bar .active a {
color: #fff;
cursor: default;
background-color: #337ab7;
border-color: #337ab7;
}
.page-bar i {
font-style: normal;
color: #d44950;
margin: 0px 4px;
font-size: 12px;
}