平台项目 ~ element-vue-table

Posted 2022-05-18 danhuangpai

平台项目~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> 配合上述功能使用,实现自动分页