<template> <div class="widthHeightCommon" :id='elId'> <el-tabs style="width:100%;height:100%" v-model="editableTabsValue" type="card"> <el-tab-pane class="widthHeightCommon" :key="item.name" v-for="item in editableTabs" :label="item.title" :name="item.name" > <hsTable class="widthHeightCommon" :allSourceData='pageSource[item.link]' :layout='layout' :elInfo='pageSource[item.link].control' :paginationFun='paginationFun' @selectionChange='selectionChange' :jsoneditorCloseAfter='jsoneditorCloseAfter' :jsoneditorOpenAfter='jsoneditorOpenAfter' > </hsTable> </el-tab-pane> </el-tabs> <jsoneditor v-model='jsoneditorVisible' :elInfo='elInfo' :layout='layout' :jsoneditorCloseAfter='jsoneditorCloseAfter' :jsoneditorOpenAfter='jsoneditorOpenAfter' > </jsoneditor> </div> </template> <script> import ucComponent from '../ucClass/uc_component' import uuidv1 from 'uuid/v1' import jsoneditor from '../common/jsoneditor' export default { mixins: [ucComponent], components: { jsoneditor }, name: 'hsTabsQueryBiLinkTables', props: { pageSource: {}, allSourceData: { type: Object, default() { return {} } }, elInfo: { type: Object, default() { return {} } }, value: '', layout: {}, saveConfigDataFun: { type: Function }, jsoneditorCloseAfter: { type: Function }, jsoneditorOpenAfter: { type: Function }, paginationFun: { type: Function }, selectionChange: { type: Function } }, watch: { value(val) { this.value_inner = val }, value_inner(val) { this.$emit('input', val) } }, data() { return { elId: '', value_inner: '', jsoneditorVisible: false, title: '', placeholder: '', size: 'mini', editableTabsValue: '2', editableTabs: [{ title: 'Tab 1', name: '1', link: 'table1', content: 'Tab 1 content' }, { title: 'Tab 2', name: '2', link: 'table2', content: 'Tab 2 content' }] } }, created() { this.elId = uuidv1() // 获取随机id }, mounted() { const { config } = this.allSourceData if (config) { this.initConfig(config) } }, methods: { initConfig(config) { const { title, placeholder, size } = config this.title = title this.placeholder = placeholder this.size = size }, submitInput(val) { const parm = {} parm[this.elInfo.prop] = this.value_inner this.$emit('enterInput', parm) } } } </script> <style scoped> .widthHeightCommon{ width: 100%; height: 100%; } </style>