OpenAuth.net入門【4】——自定義數據列表和編輯界面

原創

jiancaixing

2022-02-15 12:57

接前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>