algorithm-platform-vue/src/views/modules/visi/design-experconfig.vue

<template>
  <div class="ant-tabs-tabpane">
    <el-tabs default-active-key="1" @change="callback">
      <el-tab-pane key="1" label="实验设置">
        <el-form :layout="formLayout">
          <el-form-item name="nodeName" label=" 实验名称">
            <el-input
              placeholder="input placeholder"
              v-model="experimentName"
            ></el-input>
          </el-form-item>

          <el-form-item :wrapper-col="buttonItemLayout.wrapperCol">
            <el-button type="primary" @click="primary"> 保存 </el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  data() {
    return {
      visible: false,

      nodeName: "",
      experimentName: "",

      formLayout: "horizontal",
      form: this.$form.createForm(this, { name: "coordinated" }),
    };
  },
  //   mounted(){
  //     this.init([],"");
  //   },
  methods: {
    handleFormLayoutChange(e) {
      this.formLayout = e.target.value;
    },
    callback(key) {
      console.log(key);
    },
    init() {
      this.visible = true;
      // this.conditionForm.sourcedatalist =sourcedatalist;
    },
    primary() {
      
      this.$emit("primaryExperimentclick", this.experimentName);
    },
  },
  computed: {
    formItemLayout() {
      const { formLayout } = this;
      return formLayout === "horizontal"
        ? {
            labelCol: { span: 4 },
            wrapperCol: { span: 14 },
          }
        : {};
    },
    buttonItemLayout() {
      const { formLayout } = this;
      return formLayout === "horizontal"
        ? {
            wrapperCol: { span: 14, offset: 4 },
          }
        : {};
    },
  },
};
</script>
<style>
.ant-tabs-tabpane {
  background: #fff;
  padding: 5px;
  width: 100%;
  height: 100%;
}
.ant-tabs-tab {
  flex: 1 1 50px;
  padding: 7px 16px;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
}
</style>