element ui 中table表格的使用：高度自适应 分页器的使用

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函数。