国标协议视频平台EasyGBS是能够对接公安网、校园网的国标协议视频流媒体服务，对于很多项目来说，国标协议的级联功能是一个非常实用的功能，将上下级平台连接起来并实现统一管理是很多项目的需求。
在EasyGBS最新的开发过程中，我们实现了EasyGBS级联自定义国标通道，本文和大家分享下我们的实现过程和方法。
1.新建一个InputTag.vue自定义组件用来编辑自定义级联国标通道。
代码语言：javascript复制<template>
<div>
<el-input
class="input-new-tag"
v-if="inputVisible"
v-model="inputValue"
type="number"
ref="saveTagInput"
size="small"
@keyup.enter.native="handleInputConfirm"
@blur="handleInputConfirm"
>
</el-input>
<el-button type="text" v-else class="button-new-tag" size="small" @click="showInput">{{channel.CustomID || channel.ID}}</el-button>
</div>
</template>
<script>
export default {
props: ['channel'],
data() {
return {
inputVisible: false,
inputValue: ''
};
},
methods: {
showInput() {
this.inputValue = this.channel.CustomID || this.channel.ID
this.inputVisible = true;
this.$nextTick(_ => {
this.$refs.saveTagInput.$refs.input.focus();
});
},
handleInputConfirm() {
let inputValue = this.inputValue;
let lodInputValue = this.channel.CustomID || this.channel.ID
if (inputValue&&lodInputValue!=inputValue) {
this.$emit('submit', this.channel, inputValue)
}
this.inputVisible = false;
}
}
}
</script>
<style lang="scss" >
.button-new-tag {
width: 100%;
text-align: left;
padding: 0 4px!important;
height: 32px;
font-size: 14px;
&:hover {
color: #FF4D23 !important;
background-color: transparent !important;
}
}
.input-new-tag {
height: 22px;
border: 1px solid #606266;
vertical-align: bottom;
.el-input__inner {
padding: 0 4px;
height: 20px;
}
}
</style>2.在需要引入的组件中导入InputTag.vue 组件。
代码语言：javascript复制import InputTag from "./InputTag.vue";
export default {
components: {
InputTag
}
}3.在表格中加入一列自定义自定义编辑通道展示，并引入自定义的InputTag组件，组件有两个属性，一个channel需要通道信息，submit提交编辑后的回调函数。
代码语言：javascript复制<el-table-column
label="自定义通道国标编号"
min-width="180"
show-overflow-tooltip
>
<template slot-scope="props">
<div>
<InputTag :channel="props.row" @submit="onCustomSubmit"/>
</div>
</template>
</el-table-column>
4.当点击自定义ID会显示输入框，可自行编辑通道，到输入框失去焦点会自动上传服务器并保存。
效果预览如下：
