vue的element-ui 两种 el-table 实现数据展现：默认加载固定字段展示与动态匹配字段展示

el-table 实现数据展现：默认加载固定字段展示与动态匹配字段展示

 

第一种：默认加载固定展示

常规绑定数据集array默认为（gridList），代表返回数据集

也可以自定义，在初始化页面，加载返回： return {data:{data : dataArr, total: total}}，gridList改为dataArr即可，total为分页返回数据。

         <el-table
          class="mt-5"
          v-loading="isShowLoading"
          :data="gridList"
          stripe
          :height='tableHeight'
          style="width: 100%"
           >
          <el-table-column
            align="left"
            prop="resApplyName"
            label="记录名称"
            >
          </el-table-column>
          <el-table-column
            align="left"
            prop="entityName"
            label="实体名称"
            >
            </el-table-column>
             <el-table-column
            align="center"
            width="280"
            label="操作">
            <template slot-scope="scope">
              <CommonButton type="text" label="详情" icon="el-icon-view"                                      
                 @click="seeDetaily(scope.row)">
              </CommonButton>
            </template>
          </el-table-column>
        </el-table>

 

 

第二种：动态匹配字段展示

常规绑定数据集array为tableData同理代表返回数据集（有key和value）。

columns字段名数组，

columnNames显示label数组。columns和columnNames是对应数组

用v-for循环遍历，实现tableData的key与columns配对，

显示columns和columnNames对应label显示，tableData的value展示

 

                             <el-table
                                :data="tableData"
                                style="width: 100%"
                                height="320"
                                stripe
                                border
                                v-loading="isShowLoading">
                                <!-- 自定义列的遍历-->
                                <el-table-column v-for="(item, index) in columns"             
                               :key="index" :label="colunmNames[index]" align="center">
                                <!-- 数据的遍历  scope.row就代表数据的每一个对象-->
                                <template slot-scope="scope">
                                <span>{{scope.row[item]}}</span>
                                </template>
                                </el-table-column>
                            </el-table>

就是这么傻，还在天真的玩耍中......