style(接口测试): 接口测试文档表格,没有高级选项的行不显示展开按钮
接口测试文档表格,没有高级选项的行不显示展开按钮
This commit is contained in:
parent
6b22322832
commit
7d8d70497d
|
@ -36,7 +36,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<el-table border :show-header="true" row-key="id"
|
||||
<el-table border :show-header="true" row-key="id" :row-class-name="getRowClassName"
|
||||
:data="tableData" :class="getTableClass()" ref="expandTable">
|
||||
<el-table-column v-for="item in tableColoumArr" :key="item.id"
|
||||
:prop="item.prop"
|
||||
|
@ -136,7 +136,9 @@ export default {
|
|||
if (this.tableData) {
|
||||
this.$nextTick(() => {
|
||||
this.tableData.forEach(i => {
|
||||
if (i.hasAdvancedSetting) {
|
||||
this.$refs.expandTable.toggleRowExpansion(i, expand)
|
||||
}
|
||||
});
|
||||
this.$refs.expandTable.doLayout();
|
||||
})
|
||||
|
@ -146,6 +148,30 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
getRowClassName({row, rowIndex}) {
|
||||
let classname = 'autofix-table-row ';
|
||||
// 通过判断给不需要展开行功能的数据设置样式,通过样式去隐藏展开行图标
|
||||
if (!row.hasAdvancedSetting) {
|
||||
classname += ' hide-expand'
|
||||
}
|
||||
return classname;
|
||||
},
|
||||
isNotEmptyValue(value) {
|
||||
return value && value !== '';
|
||||
},
|
||||
rowHasAdvancedSetting(tableData) {
|
||||
let hasAdvancedSetting = false;
|
||||
if (this.isNotEmptyValue(tableData['min'])) {
|
||||
hasAdvancedSetting = true;
|
||||
} else if (this.isNotEmptyValue(tableData['max'])) {
|
||||
hasAdvancedSetting = true;
|
||||
} else if (tableData['urlEncode']) {
|
||||
hasAdvancedSetting = true;
|
||||
} else if (this.isNotEmptyValue(tableData['description'])) {
|
||||
hasAdvancedSetting = true;
|
||||
}
|
||||
return hasAdvancedSetting;
|
||||
},
|
||||
getTableClass() {
|
||||
if (this.language === "zh_TW") {
|
||||
return "test-content document-table tw-table";
|
||||
|
@ -182,6 +208,11 @@ export default {
|
|||
item.isRequired = "false";
|
||||
}
|
||||
item.id = getUUID();
|
||||
if (this.rowHasAdvancedSetting(item)) {
|
||||
item.hasAdvancedSetting = true;
|
||||
} else {
|
||||
item.hasAdvancedSetting = false;
|
||||
}
|
||||
returnJsonArr.push(item);
|
||||
}
|
||||
}
|
||||
|
@ -256,6 +287,11 @@ export default {
|
|||
border-right: 0px solid #EBEEF5
|
||||
}
|
||||
|
||||
/*通过样式隐藏图标*/
|
||||
.document-table /deep/ .hide-expand .el-table__expand-column .cell {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/*展开按钮未点击的样式是加号带边框*/
|
||||
.cn-table /deep/ .el-table__expand-icon .el-icon-arrow-right:before {
|
||||
position: unset;
|
||||
|
|
|
@ -3,6 +3,7 @@
|
|||
<el-row class="apiInfoRow">
|
||||
<div>
|
||||
<el-table border v-if="formParamTypes.includes(apiInfo.requestBodyParamType)" :show-header="true" row-key="id"
|
||||
:row-class-name="getRowClassName"
|
||||
:data="tableData" :class="getTableClass()" ref="expandTable">
|
||||
<el-table-column prop="name"
|
||||
:label="$t('api_test.definition.document.table_coloum.name')"
|
||||
|
@ -117,7 +118,9 @@ export default {
|
|||
if (this.tableData) {
|
||||
this.$nextTick(() => {
|
||||
this.tableData.forEach(i => {
|
||||
if (i.hasAdvancedSetting) {
|
||||
this.$refs.expandTable.toggleRowExpansion(i, expand)
|
||||
}
|
||||
});
|
||||
this.$refs.expandTable.doLayout();
|
||||
})
|
||||
|
@ -127,6 +130,30 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
getRowClassName({row, rowIndex}) {
|
||||
let classname = 'autofix-table-row ';
|
||||
// 通过判断给不需要展开行功能的数据设置样式,通过样式去隐藏展开行图标
|
||||
if (!row.hasAdvancedSetting) {
|
||||
classname += ' hide-expand';
|
||||
}
|
||||
return classname;
|
||||
},
|
||||
isNotEmptyValue(value) {
|
||||
return value && value !== '';
|
||||
},
|
||||
rowHasAdvancedSetting(tableData) {
|
||||
let hasAdvancedSetting = false;
|
||||
if (this.isNotEmptyValue(tableData['min'])) {
|
||||
hasAdvancedSetting = true;
|
||||
} else if (this.isNotEmptyValue(tableData['max'])) {
|
||||
hasAdvancedSetting = true;
|
||||
} else if (tableData['urlEncode']) {
|
||||
hasAdvancedSetting = true;
|
||||
} else if (this.isNotEmptyValue(tableData['description'])) {
|
||||
hasAdvancedSetting = true;
|
||||
}
|
||||
return hasAdvancedSetting;
|
||||
},
|
||||
getTableClass() {
|
||||
if (this.language === "zh_TW") {
|
||||
return "test-content document-table tw-table";
|
||||
|
@ -174,6 +201,11 @@ export default {
|
|||
var item = jsonArr[index];
|
||||
if (item.name !== "" && item.name !== null) {
|
||||
item.id = getUUID();
|
||||
if (this.rowHasAdvancedSetting(item)) {
|
||||
item.hasAdvancedSetting = true;
|
||||
} else {
|
||||
item.hasAdvancedSetting = false;
|
||||
}
|
||||
returnJsonArr.push(item);
|
||||
}
|
||||
}
|
||||
|
@ -245,6 +277,11 @@ export default {
|
|||
border-right: 0px solid #EBEEF5
|
||||
}
|
||||
|
||||
/*通过样式隐藏图标*/
|
||||
.document-table /deep/ .hide-expand .el-table__expand-column .cell {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/*修改展开按钮时不旋转*/
|
||||
.document-table /deep/ .el-table__expand-icon {
|
||||
-webkit-transform: rotate(0deg);
|
||||
|
|
|
@ -34,16 +34,16 @@ export default {
|
|||
initAdvancedValue() {
|
||||
if (this.tableData) {
|
||||
this.advancedValue = {};
|
||||
if (this.tableData["min"] && this.isNotEmptyValue(this.tableData["min"])) {
|
||||
if (this.isNotEmptyValue(this.tableData["min"])) {
|
||||
this.advancedValue["schema.minLength"] = this.tableData["min"];
|
||||
}
|
||||
if (this.tableData["max"] && this.isNotEmptyValue(this.tableData["max"])) {
|
||||
if (this.isNotEmptyValue(this.tableData["max"])) {
|
||||
this.advancedValue["schema.maxLength"] = this.tableData["max"];
|
||||
}
|
||||
if (this.tableData["urlEncode"]) {
|
||||
this.advancedValue["commons.encode"] = this.$t("commons.yes");
|
||||
}
|
||||
if (this.tableData["description"] && this.isNotEmptyValue(this.tableData["description"])) {
|
||||
if (this.isNotEmptyValue(this.tableData["description"])) {
|
||||
this.advancedValue["commons.description"] = this.tableData["description"];
|
||||
}
|
||||
if (JSON.stringify(this.advancedValue) === "{}") {
|
||||
|
|
Loading…
Reference in New Issue