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