平台项目~element-table与vue
一简介:前端两大基本功能之一,table的展示
二 目的
后端传递数据到前端,这里有两种用法
1 表单仅仅是展示作用,不对每列做任何操作修饰
2 表单的一些列作格外处理
我们将分别说明
三 第一种场景
表单仅仅展示,不对每列做任何操作修饰
核心思想 动态生成列
<el-table v-if=xianshi2 ref="multipleTable" :data="(data || []).slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%" >
<el-table-column v-for="(item,index) in data2" :key="index" :label="item.ziduan" :width="item.width">
<template slot-scope="scope">
<span>{{scope.row[item.key]}}</span>
</template>
</el-table-column>
</el-table>
说明
1 :data代表展示的表单数据 :data2 代表展示的动态列,通过循环读取
2 scope用法代表插槽,属于vue用法
特点
1 节省大量的代码,仅仅需要几行就能展示大量列
2 不能针对某个列做修饰操作
3 不能只展示某些列,需要后端进行限制列的返回
四 第二种场景
表单的特定列需要进行修饰,这样需要手写所有展示列
<el-table v-if=xianshi1 ref="multipleTable" :data="(list2 || []).slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%" >
<el-table-column prop="ID" label="ID"></el-table-column>
<template slot-scope="scope">
<span :class="{yangshi:chuli(scope.row.STATE)}" >{{scope.row.STATE}}</span>
</template>
</el-table-column>
<el-table-column prop="INFO" label="INFO" :show-overflow-tooltip=true></el-table-column>
</el-table>
说明
1 针对不同列做不同的处理,prop和ID都写为列名即可
特点
1 如果列多,需要写N多列展示代码
2 可以针对不同列做扩展判断
3 在前端进行限制展出
五 总结
1 根据不同场景选择你需要的东西
六 TABLE补充
1 :show-overflow-tooltip=true 代表列内容过长会只显示前段
2 <el-pagination v-if=xianshi1 class="fy" layout="prev, pager, next" @current-change="current_change" :total="total_1" background></el-pagination> 配合上述功能使用,实现自动分页