table是element ui中不可缺少的部分
每次用到table组件，我都会出现各种各样的问题，究其原因就是对知识点掌握的不够熟练。所以要多多记录，希望多输入，然后多产出。
直接上代码：
<el-table
// 此处的key好像没有用处
:key="tableKey"
// v-loading 是表格加载数据时，是否要显示加载中的样式，如果是获取表格数据，可将listLoading参数设置为true，其他时间可以设置为false
v-loading="listLoading"
// data 就是表格需要渲染的数据
:data="list"
// table 需要设置一个表格的高度，笨一点的办法就是设置一个固定值，但是这样效果不好，不同的电脑分辨率不一样，数值肯定也是不同的，还有一种方法就是获取屏幕的高度然后进行计算。下面会用到这种方式来进行处理
:height="screenHeight"
// 表格数据加载时，可以自定义加载的提示文字， element-loading-text 就是可以用来设置这个的
element-loading-text="正在努力加载中..."
// border 表格的边框，如果不想要边框可以去掉这个属性
border
// fit 表格中的每行每列都能自适应，如果内容多了，会自动加宽
fit
// @sort-change 表格中的列，如果想要增加排序功能，则需要给表格设置这个监听函数
@sort-change="sortChange"
// table表格中，如果鼠标移动或者点击某一行，此行会高亮展示
highlight-current-row
// style width 设置table表格的宽度为100%
style="width: 100%"
>
// table表格中的每一列都是需要用el-table-column标签的 label是每一列的名称 align是居中的样式，参数有left right center三种，如果此列需要排序，则需要添加 :sortable="'custom'" 按照上面的说法可以简化为 sortable="custom" 排序需要跟prop挂钩
<el-table-column :label="'id'" align="center" :sortable="'custom'" prop="id">
// el-table-colum 中嵌套的是 template 通过slot-scope的方式来处理，展示的数据都是scope.row中的参数
<template slot-scope="scope">
<span>{{ scope.row.id }}</span>
</template>
</el-table-column>
<el-table-column :label="'横幅类型'" align="center" :sortable="'custom'" prop="bannerType">
<template slot-scope="scope">
// bannerType是数字，如果bannerTypeMap是对象，则可以直接通过bannerTypeMap[xx]的方式来获取属性值，如果bannerTypeMap是数组，则此处需要用到过滤器来进行处理：
// filters:{
// bannertypefilter(arr,code){
// for (var i = 0; i < arr.length; i++) {
// if (arr[i].id === code) {
// return arr[i].name;
// }
// } // 使用的话可以这样 {{bannerTypeMap | bannertypefilter(scope.row.bannerType)}}
//} 注意：过滤器是可以传递多个参数的，第一个参数默认是原数据，后面的参数可以直接在使用时传递即可。还有一个需要注意的，就是我在写以上的过滤器是，一开始用了数组的forEach但是不识别，换成for in 循环就可以了。原因后面会提到。
<span>{{ bannerTypeMap[scope.row.bannerType] }}</span>
</template>
</el-table-column>
// table表格中的操作按钮，一般都是需要固定的，fixed="right" 如果设置 width="300" 宽度可以直接设置
<el-table-column fixed="right" align="center" label="操作" width="300">
<template slot-scope="scope">
// button size="small" 迷你按钮 type 类型不同，展示的样式也不同
<el-button size="small" type="success" @click="handleUpdate(scope.row)">修改</el-button>
<el-button size="small" type="danger" @click="handleDel(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
// 分页器的使用。
<div class="pagination-container">
<el-pagination
:current-page.sync="listQuery.page"
:page-sizes="[10,20,30,50]"
:page-size.sync="listQuery.pageSize"
:total="total"
background
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>forEach 不支持return
如果是需要return 返回数据，在使用forEach的时候使用如下方式的return ，是不会有效果的。forEach方法无法返回数据。
这个forEach的注意点，我在使用filter过滤器的时候遇到了。。。。
注意：过滤器是可以传递多个参数的，第一个参数默认是原数据，后面的参数可以直接在使用时传递即可。还有一个需要注意的，就是我在写以上的过滤器是，一开始用了数组的forEach但是不识别，换成for in 循环就可以了。原因后面会提到。
分页器的使用注意事项可以查看下面的博客
table高度的设置
data(){
return{
screenHeight: `${document.documentElement.clientHeight}` - 242,
}
},
mounted() {
const that = this;
window.onresize = function temp() {
that.screenHeight = `${document.documentElement.clientHeight}` - 242;
};
}${document.documentElement.clientHeight} 可以获取到屏幕的高度，然后减去一个固定值就可以保证表格高度自适应了。
mounted加载函数中，如果页面宽高变化，则需要重新获取屏幕的高度值。此时需要用到的是window的一个监听尺寸变化的函数，就是 onresize函数。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
