平台项目 ~ element-vue-table

平台项目~element-table与vue
一简介:前端两大基本功能之一,table的展示
二 目的
   后端传递数据到前端,这里有两种用法
   1 表单仅仅是展示作用,不对每列做任何操作修饰
   2 表单的一些列作格外处理 
   我们将分别说明
三 第一种场景
  表单仅仅展示,不对每列做任何操作修饰
  核心思想 动态生成列
  <el-table v-if=xianshi2 ref="multipleTable" :data="(data || []).slice((currentPage-1)*pagesize,currentPage*pagesize)" style=" 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=" 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> 配合上述功能使用,实现自动分页

七 字体关键字变红功能设计

<el-table-column label="STATE">
  <template slot-scope="scope">
         <span :class="{yangshi:chuli(scope.row.STATE)}" >{{scope.row.STATE}}</span>
  </template>
</el-table-column>

chuli: function (row) {
  console.log(row)
  if (row === 'Waiting for table metadata lock' || row === 'copy to tmp table') {
    console.log('test2')
    return true
  } else {
    console.log('test3')
    return false
  }

.yangshi {
  background-color: #FF0000;
}
八 scope 具体用法
目的 绑定每一行进行录入,通常见于对于table每行的操作

<template slot-scope="scope">
       <span>{{scope.row[item.label]}}</span>
</template>
1 需要用到template slot-scope 属性
2 scope.$index 代表table每行头标 从0开始
  scope.row    代表每行数据
  scope.row.key  代表每行的具体列数据
九 补充
 1 一个table只能绑定一个数据源(:data) 这点要牢记