elementUI的Table 表格问题

在开发vue框架项目时，引入element插件，使用table表格组件时，遇到了一些问题，以下列出以供参考。

1.表格样式问题： 混乱样式.png
正常样式.png

如上图，在当前导航表格table样式是没问题的，但当我点击别的导航去到另外的页面，然后再回到之前的导航页面，表格table的样式就会混乱，随便点击当前页面或刷新亦或拉伸页面，样式又恢复正常,很奇怪的样式问题。
打开调试之后，发现table的宽度并没有按照100%来显示，而是根据表格宽度值来计算的（我这里是640px），并且在table标签底下发现了colgroup和col标签，colgroup包裹着对应单元格数的col,并且col的宽度为80px,瞬间恍然大悟，明白640px是怎么得来的，这里一共有8个单元格，8*80就是640px了，那要怎么解决这个默认样式呢？
一、给表格添加固定宽度

<template>
<div class="table">
        <el-table :data="data" v-loading="loading" border style="width:100%;text-algin:center;" :header-cell-style="{background:'#F4F6F9'}" ref="multipleTable">
          <el-table-column prop="deviceTypeName" label="柜子类型名称" width="250" align="center" highlight-current-row="true">
          </el-table-column>
          <el-table-column prop="deviceTypeIntroduce" label="柜子类型说明" width="250" align="center"highlight-current-row="true">
          </el-table-column>
</div>
</template>
     //但是这个方法有个弊端，当显示的单元格过多时，表格下方会出现横向滚动条，数据不能一目了然，用户体验感不佳，还是宽度自适应比较好。

二、利用flex的特性

// 在项目中新建一个公共css文件，这样可以适用于所有表格table
//common.css
table,tbody,thead {
    width: 100% !important;
}
colgroup {
    position: absolute;
    width: 100% !important;
    display: flex;
}
col {
    flex: 1;
    text-align: center;
}
//在main.js中引入即可，table里面的单元格不用设置宽度属性，这里就可实现自适应。

2.table表格数据问题
table显示的数据并不是一成不变的，这里传入table的data需要有实时监控的功能，其中一个数据的改变就要及时显示，这里我用计算属性computed来进行监控。有时候后台返回的状态数据是0,1等等，我们也可以在里面进行判断渲染。

//vue文件
<template>
<div class="table">
   //这里的dataList就是computed里面的dataList
        <el-table :data="dataList" v-loading="loading" border style="width:100%;text-algin:center;" :header-cell-style="{background:'#F4F6F9'}" ref="multipleTable" >
          <el-table-column prop="deviceTypeName" label="柜子类型名称" align="center" highlight-current-row="true">
          </el-table-column>
          <el-table-column prop="deviceTypeIntroduce" label="柜子类型说明" align="center"highlight-current-row="true">
          </el-table-column>
</div>
</template>

<script>
export default {
  name: "basetable",
    data(){
     return{
        tableData:[],
       }
    }，
  computed: {
    dataList() {
    //这里的 this.tableData是请求接口得到的数据
      let liArr = this.tableData;
      if(liArr .length>0){
      for (var i = 0; i < liArr.length; i++) {
        if (liArr[i].status == 0) {
          liArr[i].status = "启用";
        } else if (liArr[i].status == 1) {
          liArr[i].status = "停用";
        }
        if (liArr[i].line == 0) {
          liArr[i].line = "离线";
        } else if (liArr[i].line == 1) {
          liArr[i].line = "在线";
        }
      }
      return liArr;
    }
   }
  },
}
</script>

3.table表格的排序、筛选

//有时候需要对表格进行排序或者筛选，查看或对比需要的数据，这里就要用到sortable属性、filters属性、filter-change方法、sort-change方法。
//vue文件
<template>
<div class="table">
   // 将filter-change方法、sort-change方法放在el-table里面，default-sort属性设置默认的排序列和排序顺序，排列顺序默认为ascending（上升的，从小到大）, 还有可选值descending（下降的，从大到小）
        <el-table :data="dataList" v-loading="loading" border style="width:100%;text-algin:center;" :header-cell-style="{background:'#F4F6F9'}" ref="multipleTable" :default-sort="{prop: 'num', order: 'ascending'}" @filter-change="handleFilterChange"  @sort-change='handleSortChange'>
  //列中设置filters属性即可开启该列的筛选，filter-multiple是否多选
       <el-table-column
            prop="status" column-key="status" label="启用状态" align="center"  :filters="[{ text: '启用', value: '启用' }, { text: '停用', value: '停用' }]" filter-placement="bottom" :filter-multiple="ismultiple" >
            <template slot-scope="scope">
              <span  v-if="scope.row.status=='启用' " style="color:green">{{ scope.row.status }}</span>
              <span v-else style="color: red" >{{ scope.row.status }}</span>
            </template>
          </el-table-column>
   //在列中设置sortable属性即可实现以该列为基准的排序
          <el-table-column prop="deviceTypeIntroduce" label="涨幅" sortable align="center"  highlight-current-row="true">
  </el-table-column>
</el-table>
</div>
</template>

<script>
export default {
  name: "basetable",
    data(){
     return{
        tableData:[],
        ismultiple：false
       }
    }，
   methods:{
     //过滤方法
      handleFilterChange(filters) {
      //从filters获取需要的参数
     },
     //排序方法
     handleSortChange(sorts){
     //从sorts获取需要的参数（column:当前列，prop:前列需要排序的数据,order:排序的规则（升序、降序和默认[默认就是没排序]））
       }
    }
}

</script>

4.表头添加Tooltip 文字提示

Tooltip.jpg

//element文档table里面有个属性render-header（列标题 Label 区域渲染使用的 Function），可以用这个属性添加文字提示。
//vue文件
<template>
<div class="table">
        <el-table :data="dataList" v-loading="loading" border style="width:100%;text-algin:center;" :header-cell-style="{background:'#F4F6F9'}" ref="multipleTable" >
     //需要显示文字提示的表头列加上 :render-header="tipHelp"，tipHelp是一个方法
<el-table-column
          prop="currencyType"
          label="货币类型"
          align="center"
          :render-header="tipHelp"
        >
        </el-table-column>
</el-table>
</div>
</template>

<script>
export default {
  name: "basetable",
    data(){
     return{
        tableData:[],
        ismultiple：false
       }
    }，
   methods:{
    tipHelp() {
      return (
        <el-tooltip class="tooltip" effect="dark" placement="bottom">
       //这里是提示语的具体内容
          <ul slot="content">
            <li style="margin-bottom:5px;">
         货币说明：
            </li>
           <li>$：美元</li>
            <li>₫：印尼货币</li>
            <li>Rp：越南货币</li>
          </ul>
         //这里是表头的名称，并加上一个icon
          <div>
         货币类型
            <i
              class="el-icon-question"
              style="margin-left:3px;font-size:15px;"
            />
          </div>
        </el-tooltip>
      );
    },
    }
}
     //其他table的属性和方法可根据实际情况对应地去使用，用法大多是大同小异的，可以去官网查看文档喔
</script>

今天的心得就到这儿了，希望可以帮助到有需要的小伙伴儿O(∩_∩)O

playUp.jpg