vue项目el-dialog根据业务类型显示不同页面？

Question

项目中有个点击表格数据，弹出el-dialog展示明细信息，原来是在这个页面写了多个el-dialog,根据这条记录的类型字段调用不同查询接口展示不同el-dialog，现在多个页面都要增加这个展示明细数据的功能，想做成公共组件，请问怎么处理比较好？

Answer 1

给你个自己的封装的例子你看一下(逻辑代码不能发, 主要是结构):
组件里面尽量不发接口, 所有的数据都通过传入或Vuex获取
el-form-item使用 v-for="item in column"渲染, column是传入的. 需要使用table也是同理

组件结构:

<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="40%"
    :before-close="handleClose"
  >
    <el-form
      ref="dialogForm"
      :model="form"
      :rules="rules"
      label-width="110px"
    >
      <el-form-item
        v-for="item in column"
        :key="item.name"
        :label="item.name"
        :prop="item.prop"
      >
        <el-autocomplete
          v-if="item.prop==='type'"
          v-model.trim="form[item.prop]"
          :fetch-suggestions="interRemoteMethod"
          placeholder="请输入类型"
          style="width:100%"
        ></el-autocomplete>
        <div v-else-if="item.prop==='viewPermission'">
          <el-checkbox
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange"
          >全选</el-checkbox>
          <el-checkbox-group
            @change="handleCheckedCitiesChange"
            v-model="form.viewPermission"
          >
            <el-checkbox
              v-for="item in checkboxList"
              :key="item.label"
              :label="item.label"
            >{{ item.name }}</el-checkbox>
          </el-checkbox-group>
        </div>
        <el-radio-group
          v-else-if="item.prop==='downloadPermission'"
          v-model="form[item.prop]"
        >
          <el-radio label="1">是</el-radio>
          <el-radio label="0">否</el-radio>
        </el-radio-group>

        <el-input
          v-else
          v-model="form[item.prop]"
          placeholder="请输入"
        ></el-input>
      </el-form-item>

      <!-- <el-form-item>
    <el-button type="primary" @click="onSubmit">立即创建</el-button>
    <el-button>取消</el-button>
  </el-form-item> -->
    </el-form>
    <span
      slot="footer"
      class="dialog-footer"
    >
      <el-button @click="handleClose">取 消</el-button>
      <el-button
        type="primary"
        @click="addForm('dialogForm')"
      >确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>

export default {
  props: {
    title: {
      type: String,
      required: false,
      default: "新建",
    },
    column: {
      type: Array,
      required: true,
    },
    dialogVisible: {
      //控制弹窗
      type: Boolean,
      required: true,
    },
    rowId: {
      type: [String, Number],
      required: false,
    },
    apiName: {
      type: String,
      required: true,
    },
  },
</script>

组件使用

    <ShowDialog
      :column="dialogColumn"
      :dialogVisible.sync="dialogVisible"
      @updateList="updateList"
      :rowId="rowId"
      :title="dialogTitle"
      :apiName="apiName"
    />