OpenAuth.net入门【4】——自定义数据列表和编辑界面

接前3篇

OpenAuth.net入门【1】——代码生成过程记录 - 星星c# - 博客园 (cnblogs.com)

OpenAuth.net入门【2】——代码生成后补全编辑功能 - 星星c# - 博客园 (cnblogs.com)

OpenAuth.net入门【3】——代码生成后补全查询功能 - 星星c# - 博客园 (cnblogs.com)

1、找到vue项目里的前台代码

　　位置如下：

　　

2、调整表格的自定义列

　　(1)去掉下面标红的自动表格的代码，如下图：

　　

　　(2)、去掉上图中红框标识的部分

　　(3)、去掉Auth的引用，如下图：

　　

　　

　　(4)、添加自定义列

　　在原来 auth-table的位置，放入如下代码，如图：　

　　

 　　代码如下：

<div class="bg-white" style="height: 100%">
        <el-table
          ref="mainTable"
          :key="tableKey"
          :data="list"
          v-loading="listLoading"
          border
          fit
          highlight-current-row
          style="width: 100%"
          height="calc(100% - 52px)"
          @row-click="rowClick"
          @selection-change="handleSelectionChange"
        >
          <el-table-column align="center" type="selection" width="55">
          </el-table-column>
          <el-table-column min-width="80px" :label="'名称'">
            <template slot-scope="scope">
              <span>{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column min-width="200px" :label="'品牌'">
            <template slot-scope="scope">
              <span>{{ scope.row.brand }}</span>
            </template>
          </el-table-column>
          <el-table-column min-width="200px" :label="'型号'">
            <template slot-scope="scope">
              <span>{{ scope.row.model }}</span>
            </template>
          </el-table-column>
          <el-table-column min-width="200px" :label="'联网方式'">
            <template slot-scope="scope">
              <span>{{ scope.row.internetType }}</span>
            </template>
          </el-table-column>
          <el-table-column min-width="200px" :label="'备注'">
            <template slot-scope="scope">
              <span>{{ scope.row.remarks }}</span>
            </template>
          </el-table-column>
          <el-table-column min-width="200px" :label="'创建时间'">
            <template slot-scope="scope">
              <span>{{ scope.row.createTime }}</span>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="listQuery.page"
          :limit.sync="listQuery.limit"
          @pagination="handleCurrentChange"
        />
      </div>

　　3、调整编辑界面的自定义列

　　去掉下图的自动生成的编辑列

　　

 　　换成下面的代码：

　　

 　　代码如下：

<el-dialog
        v-el-drag-dialog
        class="dialog-mini"
        width="500px"
        :close-on-click-modal="false"
        :title="textMap[dialogStatus]"
        :visible.sync="dialogFormVisible"
      >
        <el-form
          :rules="rules"
          ref="dataForm"
          :model="temp"
          label-position="right"
          label-width="100px"
        >
          <el-form-item size="small" :label="'名称'" prop="name">
            <el-input v-model="temp.name"></el-input>
          </el-form-item>
          <el-form-item size="small" :label="'品牌'" prop="brand">
            <el-input v-model="temp.brand"></el-input>
          </el-form-item>
          <el-form-item size="small" :label="'型号'" prop="model">
            <el-input v-model="temp.model"></el-input>
          </el-form-item>
          <el-form-item size="small" :label="'联网方式'" prop="internetType">
            <el-input v-model="temp.internetType"></el-input>
          </el-form-item>
          <el-form-item size="small" :label="'备注'" prop="remarks">
            <el-input v-model="temp.remarks"></el-input>
          </el-form-item>
        </el-form>

        <div slot="footer">
          <el-button size="mini" @click="dialogFormVisible = false"
            >取消</el-button
          >
          <el-button
            size="mini"
            v-if="dialogStatus == 'create'"
            type="primary"
            @click="createData"
            >确认</el-button
          >
          <el-button size="mini" v-else type="primary" @click="updateData"
            >确认</el-button
          >
        </div>
      </el-dialog>

　　备注：　在el-dialog里加上:close-on-click-modal="false"属性，可以防止在空白处点击时这个弹出框自动关闭，如下图：

　　

 

　4、预览效果

　　保存即可完成，界面如下：

　　

 

 

 　　

 

　　5、调整列宽

　　由于是手工自定义的列表，所以宽度可以按自己的需求调整，如下图：

　　

 　　调整完效果如下：　

　　

 

 　　预告：下一篇 自定义列的内容显示