基于若依的ruoyi-nbcio流程管理系统一种简单的动态表单模拟测试实现（二）

<!-- 列表标题与内容这个部分要根据配置动态根据主表信息来动态生成 -->
    <el-table v-loading="loading" :data="mainDataList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <div v-for="(item, i) in columnList">
        <el-table-column :label="item.__config__.label" align="center"
                         :width="item.style.width" :prop="item.__vModel__" />
      </div>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope"> <!-- 这个暂时固定，以后可根据配置动态生成按钮-->
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['workflow:flowConfig:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['workflow:flowConfig:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

mounted() {
    const that = this;
    const formId =  that.$route.query && that.$route.query.formId;
    if (formId) {
      getForm(formId).then(res => {
        that.formConf = JSON.parse(res.data.content);
        console.log("getForm that.formConf",that.formConf);
        that.columnList = that.formConf.fields;
        console.log("getForm that.columnList",that.columnList);
        const tableName = that.formConf.mainTable;
        if(tableName) {
          getData(tableName).then(response => {
            console.log("getData response",response);
            that.mainDataList = response.data;
          })
        }
      })
    }
  },