【ZeyFraのJavaEE开发小知识04】Elment UI

关于在Vue中使用ElmenetUI组件如何实现动态表格

​

<el-table v-loading="listLoading" :data="tableDataList" border fit highlight-current-row>
    <el-table-column v-for="item in tableColumnLsit" :key="item.property" :label="item.propertyName" :property="item.property" align="center">
        <template slot-scope="scope">
            <span>{{ scope.row[scope.column.property] }}</span>
        </template>
    </el-table-column>
</el-table>

tableColumnList：表格标题list

tableDataList：数据List，其内容应与标题list对应

注：应优先获得tableColumnList再去请求tableDataList，listLoading可在获取tableColumnList时设置为false，获取完tableDataList后再设置true，这样载入动画会更流畅。