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

妖狐艹你老母 2021-08-31 06:01 1356阅读 0赞

### 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方法无法返回数据。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
这个forEach的注意点，我在使用filter过滤器的时候遇到了。。。。  
注意：过滤器是可以传递多个参数的，第一个参数默认是原数据，后面的参数可以直接在使用时传递即可。还有一个需要注意的，就是我在写以上的过滤器是，一开始用了数组的forEach但是不识别，换成for in 循环就可以了。原因后面会提到。

### 分页器的使用注意事项可以查看下面的博客 ###

[分页器的使用注意事项][Link 1]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20210725/0ecc6b0374aa4ba78d7196594aefe6b8.png
[Link 1]: https://blog.csdn.net/yehaocheng520/article/details/107530139