Vue Element前端应用开发之根据ABP后端接口实现前端展示

getlist() { // 列表数据获取
      var param = { // 构造常规的分页查询条件
        SkipCount: (this.pageinfo.pageindex - 1) * this.pageinfo.pagesize,
        MaxResultCount: this.pageinfo.pagesize,
        // 过滤条件
        Name: this.searchForm.name,
        Remark: this.searchForm.remark,
        DictType_ID: this.searchForm.dictType_ID
      };

      // 获取产品列表，绑定到模型上，并修改分页数量
      this.listLoading = true
      dictdata.GetAll(param).then(data => {
        this.list = data.result.items
        this.pageinfo.total = data.result.totalCount
        this.listLoading = false
      })
    },

// 业务API对象
import dicttype from '@/api/dicttype'
import dictdata from '@/api/dictdata'

<el-table
          v-loading="listLoading"
        :data="list"
          border
          fit
          stripe
          highlight-current-row
          :header-cell-style="{background:'#eef1f6',color:'#606266'}"
          @selection-change="selectionChange"
          @row-dblclick="rowDbclick"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column label="字典名称">
            <template slot-scope="scope">
              {{ scope.row.name }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="字典值">
            <template slot-scope="scope">
              {{ scope.row.value }}
            </template>
          </el-table-column>
          <el-table-column label="备注">
            <template slot-scope="scope">
              {{ scope.row.remark }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="排序" width="80">
            <template slot-scope="scope">
              {{ scope.row.seq }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="140">
            <template scope="scope">
              <el-row>
                <el-tooltip effect="light" content="查看" placement="top-start">
                  <el-button icon="el-icon-search" type="success" circle size="mini" @click="showView(scope.row.id)" />
                </el-tooltip>
                <el-tooltip effect="light" content="编辑" placement="top-start">
                  <el-button icon="el-icon-edit" type="primary" circle size="mini" @click="showEdit(scope.row.id)" />
                </el-tooltip>
                <el-tooltip effect="light" content="删除" placement="top-start">
                  <el-button icon="el-icon-delete" type="danger" circle size="mini" @click="showDelete(scope.row.id)" />
                </el-tooltip>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
        <div class="block" style="height:70px;">
          <el-pagination
            :current-page="pageinfo.pageindex"
            :page-size="pageinfo.pagesize"
            :total="pageinfo.total"
            :page-sizes="[10,20,30,40]"
            layout="total, sizes, prev, pager, next"
            @size-change="sizeChange"
            @current-change="currentChange"
          />
        </div>