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

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

<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) 这点要牢记

来源：oschina

链接：https://my.oschina.net/u/4332949/blog/3449596

标签

pagination

tooltip

Vue.js

element-vue