极客观点
项目管理
HarmonyOS
想将数据中的getEndpoints绑定到 Element UI 的 table上．每一组getEndpoints数组能追溯父级key(来源).
如何实现呢？
1.Element UI 绑定table例子的数据格式:
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}]2.需要转化的数据格式：
"services": [
{
"key": "1",
"label": "istio::cartservice",
"group": "istio",
"getEndpoints": [
{
"key": "1-1",
"label": "1-1-info"
},
{
"key": "1-2",
"label": "1-1-info"
}
]
},
{
"key": "2",
"label": "istio-dp::ratings",
"group": "istio-dp",
"getEndpoints": [
{
"key": "2-1",
"label": "2-1-info"
},
{
"key": "2-2",
"label": "2-2-info"
}
]
}
]完整的问题描述：
一.需要是中下图这样的，有三个数据来源，分别是服务，服务实例，端点．内容列表左边一级复选框，右边二级.
１．当切换３个数据源的时候，一级列表展示相应数据．
２．当选择实例或端点时，勾选一级列表后，会展示相应的二级列表．
当前已经实现了一级列表，搜索功能(假定了如下数据拼合方式)．假定数据拼装格式：
[
{
"key": "aXN0aW86OmNhcnRzZXJ2aWNl.1",
"label": "istio::cartservice",
"group": "istio",
"getEndpoints": [
{
"key": "aXN0aW86OmNhcnRzZXJ2aWNl.1_UE9TVDovaGlwc3RlcnNob3AuQ2FydFNlcnZpY2UvR2V0Q2FydA==",
"label": "POST:/hipstershop.CartService/GetCart"
},
{
"key": "aXN0aW86OmNhcnRzZXJ2aWNl.1_UE9TVDovaGlwc3RlcnNob3AuQ2FydFNlcnZpY2UvRW1wdHlDYXJ0",
"label": "POST:/hipstershop.CartService/EmptyCart"
}
]
}
]
二．数据是这样的：
ServiceInstances(实例) 和 Endpoints(端点)的数据是用Service(服务)，的Key查出的．
也就是说Service(服务)没有二级列表．
1.Service数据如下：
{
"data": {
"services": [
{
"key": "aXN0aW86OmNhcnRzZXJ2aWNl.1",
"label": "istio::cartservice",
"group": "istio"
},
{
"key": "aXN0aW8tZHA6OnJhdGluZ3M=.1",
"label": "istio-dp::ratings",
"group": "istio-dp"
}
]
}
}2.ServiceInstances(实例)数据如下(请求参数需要serviceId，即service的key)：
{
"data": {
"getServiceInstances": [
{
"key": "aXN0aW8tZHA6OmN1cnJlbmN5c2VydmljZQ==.1_Y3VycmVuY3lzZXJ2aWNlLTVkNWQ0OTY5ODQtdGQ1YzI=",
"label": "currencyservice-5d5d496984-td5c2",
"language": "UNKNOWN",
"attributes": []
}
]
}
}3.Endpoints(端点)数据如下(请求参数需要serviceId，即service的key):
{
"data": {
"getEndpoints": [
{
"key": "aXN0aW86OnNoaXBwaW5nc2VydmljZQ==.1_UE9TVDovaGlwc3RlcnNob3AuU2hpcHBpbmdTZXJ2aWNlL1NoaXBPcmRlcg==",
"label": "POST:/hipstershop.ShippingService/ShipOrder"
},
{
"key": "aXN0aW86OnNoaXBwaW5nc2VydmljZQ==.1_UE9TVDovaGlwc3RlcnNob3AuU2hpcHBpbmdTZXJ2aWNlL0dldFF1b3Rl",
"label": "POST:/hipstershop.ShippingService/GetQuote"
}
]
}
}三．当前实现代码如下：
1.Element UI部分：
<el-dialog title="新增单独配置" :visible.sync="dialogFormIndividualRulesVisible" width="80%" class="titleH1">
<el-form :model="form">
<label for="" class="titleH2">关联资源</label>
<el-form-item label="资源项" :label-width="formLabelWidth">
<el-select v-model="form.region" @change="getSkywalkingResourcesData" placeholder="请选择资源项">
<el-option label="服务" value="http://demo.skywalking.apache.org/graphql"></el-option>
<el-option label="服务实例" value="http://demo.skywalking.apache.org/graphql"></el-option>
<el-option label="端点" value="http://demo.skywalking.apache.org/graphql"></el-option>
</el-select>
</el-form-item>
<label for="" class="titleH2">告警对象</label>
<el-form-item label="选择服务" :label-width="formLabelWidth">
<div style="display: flex;">
<el-table
ref="multipleTable"
:data="tableDataAlarmObject"
tooltip-effect="dark"
style="width: 40%"
border
height="200"
:header-cell-style="{
'background-color': '#add5fd',
'color': 'rgb(255, 255, 255)',
}"
@selection-change="handleSelectionChange1">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="label"
label="服务名称"
>
<template slot="header" slot-scope="scope">
<el-input
@input="searchChange1"
v-model="search"
size="mini"
placeholder="输入关键字搜索"/>
</template>
</el-table-column>
</el-table>
<el-table
ref="multipleTable2"
:data="tableDataChildAlarmObject"
tooltip-effect="dark"
style="width: 40%"
border
height="200"
:header-cell-style="{
'background-color': '#add5fd',
'color': 'rgb(255, 255, 255)',
}"
>
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="label"
label="服务名称"
>
</el-table-column>
</el-table>
</div>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormIndividualRulesVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogFormIndividualRulesVisible = false">确 定</el-button>
</div>
</el-dialog>2.TypeScript主要部分：
private tableDataAlarmObject: Array<AlarmObjectForm> = []
private dataEndPoints: Array<any> = [
{
"key": "aXN0aW86OmNhcnRzZXJ2aWNl.1",
"label": "istio::cartservice",
"group": "istio",
"getEndpoints": [
{
"key": "aXN0aW86OmNhcnRzZXJ2aWNl.1_UE9TVDovaGlwc3RlcnNob3AuQ2FydFNlcnZpY2UvR2V0Q2FydA==",
"label": "POST:/hipstershop.CartService/GetCart"
},
{
"key": "aXN0aW86OmNhcnRzZXJ2aWNl.1_UE9TVDovaGlwc3RlcnNob3AuQ2FydFNlcnZpY2UvRW1wdHlDYXJ0",
"label": "POST:/hipstershop.CartService/EmptyCart"
}
]
}
]
created() {
this.tableDataAlarmObject = [...this.dataEndPoints];
}
// 选择服务复选框
handleSelectionChange1(val: any) {
if (this.searchFlag) {
return;
}
this.tableDataAlarmObject.forEach(item => {
item.checked = false;
})
val.forEach((row: any) => {
row.checked = true;
})
let arr: Array<any> = [];
for(let i in val){
const getEndpoints = (val[i] as any).getEndpoints.map((item: any)=>{
item.p_key = (val[i] as any).key;
return item;
})
this.tableDataChildAlarmObject = arr.concat(getEndpoints);
}
}
// 复选框搜索
searchChange1() {
var arr = this.dataEndPoints.filter(data => !this.search || data.label.toLowerCase().includes(this.search.toLowerCase()));
this.tableDataAlarmObject.splice(0,this.tableDataAlarmObject.length);
Array.prototype.push.apply(this.tableDataAlarmObject, arr);
this.$nextTick(() => {
this.searchFlag = true
this.tableDataAlarmObject.forEach(item => {
if (item.checked)
(this.$refs.multipleTable as any).toggleRowSelection(item, true);
})
this.searchFlag = false;
})
}
要是实现数据转换的成这样子
可以这样
如果是说实现二级关联下拉选框列表
直接把下拉框组件 Cascader 级联选择器 放列表里渲染数据就可以了，选中是可以拿到想拿到的值的