组件整理，早就想整理出来了，太懒，拖到现在~
本篇需要完成的内容：
1、Element-ui 表格组件二次封装
2、配合 Element-ui 分页组件
3、表格高度自适应
本篇大段代码警告~
0. 其它
链接：ECharts/Vue--tooltip显示自动播放与列表无缝滚动
链接：Vue/ElementUi--表格组件二次封装（补充）
1. Element-ui 表格组件二次封装
表格组件
使用elementui组件，表格组件是平时最常用的组件之一了，借鉴了不少优秀的文章，做了二次封装
官网表格组件-
使用效果
表格.png
- 二次封装组件（大段代码）
// 建议新建单独组件 -- components/MyEltable/index.vue
<template>
<!-- stripe:是否为斑马纹 table; -->
<!-- border:是否带有纵向边框; -->
<!-- fit:列的宽度是否自撑开; -->
<!-- highlight-current-row:是否要高亮当前行; -->
<el-table :data="tableData" border stripe fit
ref="multipleTable"
highlight-current-row
:height="tabheight"
@row-dblclick="rowDblclick"
v-loading="loading"
element-loading-text="拼命加载中"
element-loading-background="rgba(0, 0, 0, 0.3)"
>
<!-- 是否需要全选， isshow控制-->
<el-table-column v-if="isshow" type="selection" align="center" fixed></el-table-column>
<!-- prop: 字段名name, label: 展示的名称, fixed: 是否需要固定(left, right), minWidth: 设置列的最小宽度(不传默认值),
oper: 是否有操作列, oper.name: 操作列字段名称, oper.clickFun: 操作列点击事件, formatData: 格式化内容 -->
<el-table-column v-for="(th, key) in tableHeader"
:key="key"
:prop="th.prop"
:label="th.label"
:fixed="th.fixed"
:width="th.width"
:min-width="th.minWidth" align="left">
<!-- 加入template主要是有操作一栏， 操作一栏的内容是相同的， 数据不是动态获取的，这里操作一栏的名字定死（oper表示是操作这一列，否则就不是） -->
<template slot-scope="scope">
<div v-if="th.oper">
<el-button v-for="(o, key) in th.oper"
:key="key" @click="o.clickFun(scope.row)"
:type="o.style"
:icon="o.icon"
size="small">{{o.name}}
</el-button>
</div>
<!--formatData：自定义过滤器-->
<div v-else>
<span v-if="!th.formatData">{{ scope.row[th.prop] }}</span>
<span v-else>
<!--这一块做el-tag标签样式判断。不需要可以去除判断 ** start **-->
<el-tag v-if="th.isok == 1 && scope.row[th.prop]==true" >{{ scope.row[th.prop] | formatters(th.formatData) }}</el-tag>
<el-tag v-else-if="th.isok == 1 && scope.row[th.prop]==false" type="success">{{ scope.row[th.prop] | formatters(th.formatData) }}</el-tag>
<!-- ** end**-->
<span v-else>{{ scope.row[th.prop] | formatters(th.formatData) }}</span>
</span>
</div>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
name: "index",
// 传入的数据
props: {
tableData: { // 表格数据
type: Array,
default: function () {
return []
}
},
rowDblclick: { // 单行点击事件
type: Function,
default: (row, event, column) => {
console.log('default: ' + row + '---' + event + '---' + column)
}
},
tableHeader: { // 表格头部
type: Array,
default: function () {
return []
}
},
tabheight: {
type: String,
default: '100%'
},
loading: { // 加载等待
type: Boolean,
default: false
},
isshow: {
type: Boolean,
default: false
}
},
methods: {
// 获取选择行数信息
getmydata() {
let data = this.$refs.multipleTable.selection
let IDS = []
for (let i = 0; i < data.length; i++) {
IDS.push(data[i].ID)
}
this.$emit('func', IDS)
}
}
}
</script>
<style scoped>
</style>
- 使用组件
// 组件中引用
import MyEltable from '../../components/MyEltable'
components: { MyEltable },
// 使用组件
<my-eltable ref="mt" @func="getMsgFormSon" id="printTable" :tableData="tableData" :tabheight="tabheight"
:tableHeader="tableHeader"
:loading="loading" :isshow="isshow"></my-eltable>
// data 属性
data(){
return{
loading: false,
isshow: true,
tabheight: '100%'， // 表格高度，这里是做了自适应高度，正常是需要写固定值的
tableHeader: [ // 表头
{prop: 'Name', label: '卡号'},
{prop: 'LabelType', label: '标签类型'},
{prop: 'ObjectType', label: '对象类型'},
{prop: 'ObjectValue', label: '对象值'},
{
prop: 'Enable', label: '是否启用', isok: '1', formatData: function (val) {
return val == true ? '启用' : '禁用'
}
},
// 如果后端传过来的值不是我们所预期的，此处可以如下判断修改，isok是是否需要渲染为el-tag,效果为下图
{
prop: 'Protect', label: '是否设防', isok: '1', formatData: function (val) {
return val == true ? '设防' : '未设防'
}
},
// 此处为操作栏，不需要可以删除，clickFun绑定此操作按钮的事件
{
prop: 'oper', label: '操作', fixed: 'right', minWidth: '160px', width: '160px',
oper: [
{name: '修改', style: 'primary', clickFun: this.handleClick},
{name: '删除', style: 'danger', clickFun: this.delClick},
]
}
],
tableData: [],
}
}
-
表格效果
表格效果 -
使用细节
1、data 中重要的数据属性
tabheight：表格高度，tableHeader：表头设置，tableData：表格数据2、全选是否需要？
isshow判断，true为需要，false为不需要3、如果后端传过来的值不是我们所预期的，可以判断修改，
isok为是否需要渲染为el-tag
// tableHeader 属性中 { prop: 'Enable', label: '是否启用', isok: '1', formatData: function (val) { return val == true ? '启用' : '禁用' } },
2. 配合 Element-ui 分页组件
分页组件
分页组件的使用需要看个人需求，可以单独写，也可以抽出来做二次封装，我这里就单独用了
链接：官网分页组件-
效果
分页组件 使用
<!--分页-->
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[15, 30, 45]"
:page-size="pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
// data 属性
data(){
return{
currentPage: 1,
total: null,
pagesize: 15,
}
}
数据请求及赋值
3. 表格高度自适应
当页面高度发生变化时，自动改变表格高度，做到自适应
有意思的是，我在整理这篇的时候刚好看到一篇同样写这个的文章
链接：Vue 自适应高度表格
文章写的很不错，虽然可以不用这样就能实现表格自适应，但是可以当作学习如何自己创建一个组件，值得一说的是，我最初也是获取dom高度，然后动态给表格组件赋高度，都没想过直接用css控制，本来也是打算把那个整理出来的，但是现在珠玉在前，就算了。css 方式，实现表格自适应
具体没什么代码，主要思路是：给表格父元素
height:100%，具体有几层父级看个人代码，只要保证所需要区域高度为100%就可以，需要去除某些高度的时候 父元素height: calc(100% - 按钮和间距的高度)，最后给表格100%，就像上面的代码，我给tabheight属性100%；
-
实现
表格自适应.gif
4. 结束
多向他人学习，才能成长的更快。
点个赞呗！
