切换tab栏时,弹窗显示出来的弹框内容对应也要不一样

68 阅读1分钟

效果图:

image.png

<el-tabs v-model="activeName" type="border-card">

    <el-tab-pane label="职位管理" name="post">
      <list-table :head="head.post" :operate="operate" mode="post" @click-item="edit" ref="tableDom">
        <div slot="header" class="header">
          <el-button type="primary" size="mini" @click="dialogFormVisible = true">
            新建
          </el-button>
        </div>
      </list-table>
    </el-tab-pane>
    
    <el-tab-pane label="车辆类型管理" name="train-type">
      <list-table :head="head.train_type" :operate="operate" mode="train-type" @click-item="edit" ref="tableDom">
        <div slot="header" class="header">
          <el-button type="primary" size="mini" @click="dialogFormVisible = true">
            新建
          </el-button>
        </div>
      </list-table>
    </el-tab-pane>
    
 <el-dialog :title="dialog.title" :visible.sync="dialogFormVisible" width="500px" @close="resetForm()">
 
  <el-row>
    <el-col :offset="4" :span="16">
      <el-form :model="form" label-width="100px">
        <el-form-item v-for="item in dialog.form" :key="item.label" :label="item.label">
          <el-input v-if="item.type == 'input'" v-model="form[item.key]" :placeholder="'请输入' + item.label" />
          <el-slider v-if="item.type == 'slider'" v-model="form[item.key]" />
          <el-select v-if="item.type == 'select'" v-model="form[item.key]" :placeholder="'请选择' + item.label">
            <el-option v-for="item in item.select" :key="item.value" :label="item" :value="item" />
          </el-select>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>

  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">
      取 消
    </el-button>
    <el-button type="primary" @click="submit()">
      确 定
    </el-button>
  </div>
</el-dialog>

</el-tabs>

<script>
 computed: {
    dialog () {
      let typeName = this.type == 'edit' ? '编辑' : '新增'
      let urlName = this.type == 'edit' ? 'EDIT_' : 'NEW_'
      if (this.activeName == 'post') {
        return {
          title: `${typeName}职位`,
          form: [{
            label: '职位名称',
            key: 'name',
            type: 'input',
          },],
          url: `${urlName}` +
            this.activeName.toLocaleUpperCase().replace(/-/g, '_'),
        }
      } else if (this.activeName == 'train-type') {
        return {
          title: `${typeName}车辆类型`,
          form: [{
            label: '车辆类型名称',
            key: 'name',
            type: 'input',
          },
          {
            label: '车辆出厂厂家',
            key: 'manufacturer',
            type: 'input',
          },
          ],
          url: `${urlName}` +
            this.activeName.toLocaleUpperCase().replace(/-/g, '_'),
        }
      }
    }
  }
</script>