elementUI中Table表格问题的解决方法

<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>
   //但是这个方法有个弊端，当显示的单元格过多时，表格下方会出现横向滚动条，数据不能一目了然，用户体验感不佳，还是宽度自适应比较好。

// 在项目中新建一个公共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里面的单元格不用设置宽度属性，这里就可实现自适应。

//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>

< >
export default {
 name: \" table\",
  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;
  }
  }
 },
}
</ >

//有时候需要对表格进行排序或者筛选，查看或对比需要的数据，这里就要用到sortable属性、filters属性、filter-change方法、sort-change方法。
//vue文件
<template>
<div class=\"table\">
  // 将filter-change方法、sort-change方法放在el-table里面
    <el-table :data=\"dataList\" v-loading=\"loading\" border style=\"width:100%;text-algin:center;\" :header-cell-style=\"{background:\'#F4F6F9\'}\" ref=\"multipleTable\" @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>

< >
export default {
 name: \" table\",
  data(){
   return{
    tableData:[],
    ismultiple：false
    }
  }，
  methods:{
   //过滤方法
   handleFilterChange(filters) {
   //从filters获取需要的参数
   },
   //排序方法
   handleSortChange(sorts){
   //从sorts获取需要的参数
    }
  }
}
   //其他table的属性和方法可根据实际情况对应地去使用，用法大多是大同小异的，可以去官网查看文档喔
</ >