vue2办公系统笔记之Table篇

在内容过长时想要内容全部显示，列自适应内容

解决方案： 

可安装 af-table-column 组件，此组件是基于 Element-UI 二次封装的支持自适应列宽的 table-column 列组件

npm install af-table-column

安装完成后要在main.js中导入（和elementUI的导入方式一样）

import ElementUI from 'element-ui';
import AFTableColumn from 'af-table-column';


Vue.use(AFTableColumn);

Vue.use(ElementUI, {size: 'mini'});

最后在页面中修改

<el-table :data="emps" border style="width: 100%" v-if="emps.length">
    <af-table-column prop="idNumber" label="身份证号" align="center"></af-table-column></af-table-column>
</el-table>

注：此处重点，一定要将 Vue.use(AFTableColumn); 放在 Vue.use(ElementUI, {size: 'mini'});之前，否则elementUI的设置会被覆盖，会出现size: '失效现象'

如下图所示：

 内容过长想要截取掉，气泡形式显示

如果详细看过，并牢记的小伙伴想必已经知道，在elementUI中的table已经提供了此功能，无需自行设置，位置在【Table-column Attributes】中大约三分之二处左右，如果因太多找不到也可手动搜索【show-overflow-tooltip】此方式只截取过长内容进行气泡显示，如果内容短则不会有任何操作

<el-table-column prop="name" label="职位" min-width="100" align="center" show-overflow-tooltip></el-table-column>

 注：此条主要表示看手册时一定要细致，记熟，可以省下好多代码量

固定表格底部滚动条

<template>
  <el-table :data="goodsList" border style="width: 100%" :height="tableMaxHeight">
    <el-table-column type="selection" width="55" align="center"></el-table-column>
  </el-table>
</template>


export default {
  computed: {
    // 表格高度
    tableMaxHeight() {
      return window.innerHeight - 170 + 'px';
    }
  },
}