基础设施-选中数量绑定
This commit is contained in:
gaoyuanwei
parent
e309dbbb90
commit
03c4325919
|
|
@ -29,7 +29,7 @@
|
|||
<i class="boundary"></i>
|
||||
<p>
|
||||
已选
|
||||
<span>22</span>
|
||||
<span>{{ allClick.length }}</span>
|
||||
个
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -79,12 +79,7 @@
|
|||
selectedRowKeys: selectedRowKeys,
|
||||
onChange: onSelectChange,
|
||||
}"
|
||||
>
|
||||
<template slot="status" slot-scope="text, record, index">
|
||||
<span>正常</span>
|
||||
<span>失效</span>
|
||||
</template>
|
||||
</a-table>
|
||||
></a-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -125,15 +120,11 @@
|
|||
//tab切换点击事件
|
||||
const tabClick = (indexFather, name, fatherName) => {
|
||||
if (clickList.value[indexFather].content.indexOf(name) != -1) {
|
||||
debugger
|
||||
if (fatherName == '视频资源') {
|
||||
debugger
|
||||
tableHeight.value = 330
|
||||
} else if (fatherName == '云资源') {
|
||||
debugger
|
||||
tableHeight.value = 600
|
||||
} else if (fatherName == '感知资源') {
|
||||
debugger
|
||||
tableHeight.value = 330
|
||||
}
|
||||
clickList.value[indexFather].content.splice(
|
||||
|
|
@ -141,15 +132,11 @@
|
|||
1
|
||||
)
|
||||
} else {
|
||||
debugger
|
||||
if (fatherName == '视频资源') {
|
||||
debugger
|
||||
tableHeight.value = 330
|
||||
} else if (fatherName == '云资源') {
|
||||
debugger
|
||||
tableHeight.value = 600
|
||||
} else if (fatherName == '感知资源') {
|
||||
debugger
|
||||
tableHeight.value = 330
|
||||
}
|
||||
clickList.value[indexFather].content[0] = name
|
||||
|
|
@ -296,12 +283,16 @@
|
|||
key: 'address',
|
||||
},
|
||||
])
|
||||
// const selectedRowKeys =
|
||||
const allClick = ref([])
|
||||
const onSelectChange = (selectedRowKeys) => {
|
||||
console.log('hahhahah', selectedRowKeys)
|
||||
allClick.value = selectedRowKeys
|
||||
}
|
||||
const pagination = ref({
|
||||
total: 0,
|
||||
pageSize: 10, //每页中显示10条数据
|
||||
showSizeChanger: true,
|
||||
pageSizeOptions: ['5', '15', '30', '45'], //每页中显示的数据
|
||||
pageSizeOptions: ['5', '10', '15', '20'], //每页中显示的数据
|
||||
})
|
||||
const queryParam = ref({
|
||||
page: 1, //第几页
|
||||
|
|
@ -320,131 +311,131 @@
|
|||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.infrastructrueBox {
|
||||
width: 10.87rem;
|
||||
.infrastructrueBox {
|
||||
width: 10.87rem;
|
||||
padding: 0.2rem;
|
||||
background: #f3f5f9;
|
||||
.infrastructrue-tab {
|
||||
background: #ffffff;
|
||||
padding: 0.2rem;
|
||||
background: #f3f5f9;
|
||||
.infrastructrue-tab {
|
||||
background: #ffffff;
|
||||
padding: 0.2rem;
|
||||
border-bottom: 0.01rem solid rgba(150, 144, 144, 0.3);
|
||||
span {
|
||||
display: inline-block;
|
||||
height: 0.24rem;
|
||||
font-size: 0.14rem;
|
||||
line-height: 0.24rem;
|
||||
border: 0;
|
||||
border-radius: 0.12rem;
|
||||
margin-left: 0.1rem;
|
||||
text-align: center;
|
||||
border-bottom: 0.01rem solid rgba(150, 144, 144, 0.3);
|
||||
span {
|
||||
display: inline-block;
|
||||
height: 0.24rem;
|
||||
font-size: 0.14rem;
|
||||
line-height: 0.24rem;
|
||||
border: 0;
|
||||
border-radius: 0.12rem;
|
||||
margin-left: 0.1rem;
|
||||
text-align: center;
|
||||
color: #666666;
|
||||
cursor: pointer;
|
||||
padding: 0 0.08rem;
|
||||
}
|
||||
.leftType {
|
||||
margin: 0.1rem 0;
|
||||
}
|
||||
.down {
|
||||
background: #0087ff;
|
||||
color: #ffffff;
|
||||
}
|
||||
.tabBox {
|
||||
height: 0.3rem;
|
||||
margin-bottom: 0.16rem;
|
||||
}
|
||||
.tabBox:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.infrastructrue-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0.14rem 0.2rem 0.1rem;
|
||||
background: #ffffff;
|
||||
.contentNum {
|
||||
position: relative;
|
||||
display: flex;
|
||||
p {
|
||||
color: #666666;
|
||||
cursor: pointer;
|
||||
padding: 0 0.08rem;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
span {
|
||||
color: #0087ff;
|
||||
font-size: 0.2rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
.leftType {
|
||||
margin: 0.1rem 0;
|
||||
p:first-of-type {
|
||||
padding-right: 0.16rem;
|
||||
margin-right: 0.16rem;
|
||||
}
|
||||
.down {
|
||||
background: #0087ff;
|
||||
color: #ffffff;
|
||||
}
|
||||
.tabBox {
|
||||
height: 0.3rem;
|
||||
margin-bottom: 0.16rem;
|
||||
}
|
||||
.tabBox:last-of-type {
|
||||
margin-bottom: 0;
|
||||
.boundary {
|
||||
position: absolute;
|
||||
left: 0.9rem;
|
||||
top: 0.07rem;
|
||||
display: block;
|
||||
width: 0.02rem;
|
||||
border-radius: 0.01rem;
|
||||
height: 0.2rem;
|
||||
background: rgba(150, 144, 144, 0.3);
|
||||
}
|
||||
}
|
||||
.infrastructrue-content {
|
||||
.contentRight {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0.14rem 0.2rem 0.1rem;
|
||||
background: #ffffff;
|
||||
.contentNum {
|
||||
position: relative;
|
||||
display: flex;
|
||||
p {
|
||||
color: #666666;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
span {
|
||||
color: #0087ff;
|
||||
font-size: 0.2rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
p:first-of-type {
|
||||
padding-right: 0.16rem;
|
||||
margin-right: 0.16rem;
|
||||
}
|
||||
.boundary {
|
||||
position: absolute;
|
||||
left: 0.9rem;
|
||||
top: 0.07rem;
|
||||
display: block;
|
||||
width: 0.02rem;
|
||||
border-radius: 0.01rem;
|
||||
height: 0.2rem;
|
||||
background: rgba(150, 144, 144, 0.3);
|
||||
}
|
||||
.boundary {
|
||||
position: absolute;
|
||||
left: 3.74rem;
|
||||
top: 0.07rem;
|
||||
display: block;
|
||||
width: 0.02rem;
|
||||
border-radius: 0.01rem;
|
||||
height: 0.2rem;
|
||||
background: rgba(150, 144, 144, 0.3);
|
||||
}
|
||||
.contentRight {
|
||||
position: relative;
|
||||
.searchInput {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.boundary {
|
||||
position: absolute;
|
||||
left: 3.74rem;
|
||||
top: 0.07rem;
|
||||
display: block;
|
||||
width: 0.02rem;
|
||||
border-radius: 0.01rem;
|
||||
height: 0.2rem;
|
||||
background: rgba(150, 144, 144, 0.3);
|
||||
margin-right: 0.2rem;
|
||||
.ant-input-search {
|
||||
max-width: 4rem;
|
||||
}
|
||||
.searchInput {
|
||||
display: flex;
|
||||
margin-right: 0.2rem;
|
||||
.ant-input-search {
|
||||
max-width: 4rem;
|
||||
}
|
||||
:deep(.ant-input) {
|
||||
width: 2rem;
|
||||
:deep(.ant-input) {
|
||||
width: 2rem;
|
||||
height: 0.36rem;
|
||||
font-size: 0.14rem;
|
||||
color: #b2b2b2;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
:deep(.ant-input-group-addon) {
|
||||
display: inline-block;
|
||||
margin-left: 0.1rem;
|
||||
.ant-input-search-button {
|
||||
width: 0.8rem;
|
||||
height: 0.36rem;
|
||||
font-size: 0.14rem;
|
||||
color: #b2b2b2;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
:deep(.ant-input-group-addon) {
|
||||
display: inline-block;
|
||||
margin-left: 0.1rem;
|
||||
.ant-input-search-button {
|
||||
width: 0.8rem;
|
||||
height: 0.36rem;
|
||||
background: #0558e1;
|
||||
border-radius: 0.04rem;
|
||||
font-size: 0.14rem;
|
||||
}
|
||||
}
|
||||
:deep(.ant-btn) {
|
||||
background: #0558e1;
|
||||
border-radius: 0.04rem;
|
||||
font-size: 0.14rem;
|
||||
}
|
||||
}
|
||||
.buttonAdd {
|
||||
:deep(.ant-btn) {
|
||||
background: #0558e1;
|
||||
border-radius: 0.04rem;
|
||||
height: 0.36rem;
|
||||
border-color: #0558e1;
|
||||
margin-left: 0.1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.infrastructrue-table {
|
||||
.ant-table-striped :deep(.table-striped) td {
|
||||
background-color: #fafafa;
|
||||
.buttonAdd {
|
||||
background: #0558e1;
|
||||
border-radius: 0.04rem;
|
||||
height: 0.36rem;
|
||||
border-color: #0558e1;
|
||||
margin-left: 0.1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.infrastructrue-table {
|
||||
.ant-table-striped :deep(.table-striped) td {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue