在开发 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 里面
- <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>
- <script>
- export default {
- name: "basetable",
- data(){
- return{
- tableData:[],
- ismultiple:false
- }
- },
- methods:{
- // 过滤方法
- handleFilterChange(filters) {
- // 从 filters 获取需要的参数
- },
- // 排序方法
- handleSortChange(sorts){
- // 从 sorts 获取需要的参数
- }
- }
- }
- // 其他 table 的属性和方法可根据实际情况对应地去使用, 用法大多是大同小异的, 可以去官网查看文档喔
- </script>
今天的心得就到这儿了, 希望可以帮助到有需要的小伙伴儿 O(∩_∩)O
来源: http://www.jianshu.com/p/935813511238