用不同按钮控制同一表单的显示内容，element&avue两种方法结合

 

如何在同一个表单中调取不同内容？

方法一：通过设置多个表单组件，对组件进行控制，进而控制表单内容

步骤1：在从同一个表单文件中引入不同组件，并将其作为表单形式写入template中

如下所示

<el-dialog
      title="生产计划>>智能排程管理>>人工排程管理>>可用服务单元"
      :visible.sync="dialogTablebVisible"
      :dialogTabletestaVisible="true"
      :append-to-body="true"
    >
      <artificial-scheldul-dialog
        :craftRow="nowRow"
        :xiaoxueRow="nowRow"
        :schelduleRow="row"
        :closeDialog="closeDialog"
        :putRow="putRow"
        :dialogTabletestaVisible="dialogTabletestaVisible"
      ></artificial-scheldul-dialog>
    </el-dialog>
    <el-dialog
      title="生产计划>>智能排程管理>>人工排程管理>>所需物料"
      :visible.sync="dialogTableVisible"
      :dialogTabletestbVisible="true"
      :append-to-body="true"
    >
      <artificial-scheldulb-dialog
        :craftRow="nowRow"
        :xiaoxueRow="nowRow"
        :schelduleRow="row"
        :closeDialog="closeDialog"
        :putRow="putRow"
        :dialogTabletestbVisible="dialogTabletestbVisible"
      ></artificial-scheldulb-dialog>
    </el-dialog>
    <el-dialog
      title="生产计划>>智能排程管理>>人工排程管理>>可用班组"
      :visible.sync="dialogTableaVisible"
      :dialogTabletestVisible="true"
      :append-to-body="true"
    >
      <artificial-scheldula-dialog
        :craftRow="nowRow"
        :dialogTabletestVisible="dialogTabletestVisible"
        :schelduleRow="row"
        :closeDialog="closeDialog"
        :putRow="putRow"
      ></artificial-scheldula-dialog>
    </el-dialog>

步骤2：在标签中定义变量，控制表单的显示以及调取的内容，在此处对dialogTableVisible、dialogTabletestVisible、dialogTabletestaVisible定义，控制表单显示内容

craftRow、closeDialog、putRow、schelduleRow 用来传输数据，并用prop在引入文件中定义；

步骤3：在componen中定义组件，在data中定义用到的变量；

步骤4：设置表单按钮

showDialog(scope) {
      this.dialogTablebVisible = true;

      this.dialogTabletestaVisible = true;

      //向表格内传入当前行参数
      this.nowRow = scope.row;
      console.log(this.nowRow);
    },
    xiaoxueshowDialog(scope) {
      this.dialogTableaVisible = true;
      //向表格内传入当前行参数
      this.dialogTabletestVisible = true;
      let xiaoxue = {
        operateName: this.tableData[0].tranSecond,
        dialogTabletestVisible: true,
      };
      this.nowRow = xiaoxue;
      // console.log(this.nowRow);
    },
    bianJi(scope) {
      this.dialogTableVisible = true;

      this.dialogTabletestbVisible = true;

      //向表格内传入当前行参数
      this.nowRow = scope.row;
    },
    //关闭排程操作窗口
    closeDialog(closeInfo) {
      this.dialogTableVisible = closeInfo;
    },

  步骤5：在表单文件中，用elment或avue方法制作表格，并对其有限制条件： v-if，prop将父组件数据传输；并根据需求设置功能按钮

 <template slot="expand" slot-scope="{ row }">
          <craft-info :row="row"></craft-info>
        </template>
        <!-- <el-table-column type="expand">
          </el-table-column> -->
        <el-table
        
          :data="test"
          border
         type = "expand" 
          stripe
          style="width: calc(100% - 60px); margin-left: 60px"
          :cell-style="rowStyle"
        >
        <el-table-column
           
            prop="taskCode"
            type = "expand"
            align="center"
            label=" "
            min-width="15%"
          >
        </el-table-column>
          <el-table-column
            v-if="dialogTabletestVisible"
            prop="taskCode"
           
            align="center"
            label="班组名称"
            min-width="15%"
          ></el-table-column>
          <el-table-column
            v-if="dialogTabletestVisible"
            prop="operateName"
            align="center"
            label="负责人编号"
            min-width="12%"
          >
          </el-table-column>
          <el-table-column
            v-if="dialogTabletestVisible"
            prop="taskNum"
            align="center"
            label="负责人姓名"
            min-width="10%"
          ></el-table-column>
          <el-table-column
            prop="operateCode"
            align="center"
            label="服务单元编码"
            min-width="16%"
          >
          </el-table-column>

 方法二：只调用一次表单，通过给avue传入不同的option改变表单的内容

步骤1：只调用一次表单，并定义传参，按钮

<el-dialog
      :title="testtittl"
      :visible.sync="dialogTablebVisible"
      :dialogTabletestaVisible="true"
      @open="testnewoption"
      :append-to-body="true"
      @close="clearDialog"
    >
      <artificial-scheldul-dialog
        :craftRow="nowRow"
        :xiaoxueRow="nowRow"
        :schelduleRow="row"
        :closeDialog="closeDialog"
        :xxueOption="option"
        :putRow="putRow"
        :tableData="tableData"
        :dialogTabletestaVisible="dialogTabletestaVisible"
        ref="refundFormData"
      ></artificial-scheldul-dialog>
    </el-dialog>
    import { tableOption } from "@/views/m3-scheduling/schedulingInfoManage/scheldulManagement/artScheldul.js";

步骤2：定义不同的option，通过不同按钮控制option传入的内容

xueOption: {
        column: [
          {
            label: "服务单元编码",
            prop: "operateCode",
            value: "small",
          },
          {
            label: "服务单元名称",
            prop: "operateName",
            value: "small",
          },
        ],
        editBtn: false,
      },
      axueOption: {
        column: [
          {
            label: "班组名称",
            prop: "craftNum",
            value: "small",
          },
        ],
      },
      bxueOption: {
        column: [
          {
            label: "物料编码",
            prop: "wsId",
            value: "small",
          },
        ],
      },

步骤3：      不同按钮定义：

showDialog(scope) {
      this.testtittl = "生产计划>>智能排程管理>>人工排程管理>>可用服务单元";

      this.option = this.xueOption;
      console.log(this, "yhfgyfghbvn");

      this.dialogTabletestaVisible = true;
      // if (this.$refs.refundFormData) {
      //   // this.$refs.refundFormData.newfields();
      //   // this.$refs.refundFormData.option = this.xueOption;
      //   // this.$refs.refundFormData.test = this.tableData;
      // }

      //向表格内传入当前行参数
      this.nowRow = scope.row;
      this.dialogTablebVisible = true;
    },
    ashowDialog(scope) {
      this.testtittl = "生产计划>>智能排程管理>>人工排程管理>>可用班组";

      this.option = this.axueOption;
      this.dialogTablebVisible = true;
      this.tableData = this.atableData;
      console.log(this, "yhfgyfghbvn");
      if (this.$refs.refundFormData) {
        // this.$refs.refundFormData.newfields();
        // this.$refs.refundFormData.option = this.axueOption
        // this.$refs.refundFormData.test = this.atableData;
      }
      //向表格内传入当前行参数
      this.nowRow = scope.row;
      this.dialogTabletestaVisible = true;
    },
    bshowDialog(scope) {
      this.testtittl = "生产计划>>智能排程管理>>人工排程管理>>所需物料";

      this.option = this.bxueOption;
      console.log(this, "yhfgyfghbvn");

      // if (this.$refs.refundFormData) {
      //   // this.$refs.refundFormData.newfields();
      //   // this.$refs.refundFormData.option = this.bxueOption
      // }
      //向表格内传入当前行参数
      this.nowRow = scope.row;
      this.dialogTablebVisible = true;
      this.dialogTabletestaVisible = true;
    },

 步骤4：在表单文件中设计avue，传参要检测完全，以及prop

 <avue-crud
        ref="crud"
 

        :data="test"

        :option="option"

      >
        <!-- <template #expand="{ row }"> -->
          <!-- <template #search-menu="{row,size}">
          <el-button :size="size"
          @click="searchSubmit(row)">高级查询</el-button>
        </template> -->
        <template slot-scope="{row,index}" slot="menu">
     
    <el-button type="success"
        icon="el-icon-delete"
        size="small"
        @click="$refs.crud.rowView(row,index)">查看</el-button>
        <el-button type="primary"
               @click="handleReload"
               icon="el-icon-sort">排程</el-button>
               <el-button type="primary"
               @click="testtest"
               icon="el-icon-sort">排程1</el-button>
  </template>
        <template slot="expand" slot-scope="{ row }">
          <craft-info :row="row"></craft-info>
          
        </template>
        <!-- <template slot-scope="scope" slot="mtNumber">
          <div>
            {{ takeImgName(scope.row.mtNumber) }}
          </div>
        </template> -->
<!-- 
        <el-form-item>
          <el-button type="primary" @click="prconsumablestype">耗材分类改</el-button>
        </el-form-item>
        <prconsumablestype v-if="prconsumablestypeVisible" ref="prconsumablestypeRef"></prconsumablestype> -->

      </avue-crud>

方法一是比较清晰的方法，当然最简单的办法就是引入多个表单文件，但是如果引入表单中形式差别不大，引入多个表单文件的方法就显得繁琐了。因此可以控制同一个表单内容变化，此处是对多个表单标签进行控制，和多级联动类似；

方法二是在方法一的基础上更加简化，只控制option的变化，实现起来确实很精巧，但是在参数传递部分还是很容易出现问题；实际操作中遇到虽然表单内容变化了，但每次都慢一拍，在点击关闭后，点击其他按钮还能看到一致的内容，再次点击关闭，数据更新；因此解决办法是在关闭表单时，数据更新和再次调用是同时发生的，或者是将数据全部清除，重新调用函数，显示数据。