解决iView Table组件宽度只变大不变小的问题
示例:
<Table class="my-table"></Table>
打开开发者工具其实你可以发现iView给table标签的宽度加上了一个明确的宽度值,而且在父元素变小的时候这个值并没有相应地变小,所以才会导致的iView Table组件只会变大不会变小。
那么我们就可以根据这个原因才决定解决方案
1、给Table组件的table标签设置一个important的width
.my-table table { width: 100% !important; }
这个方法并不是特别好,因为他可能会出现table慢慢变小(而不是瞬间变小)的情况,所以看起来并不是特别好。
2、给Table组件一个确定的计算值
.my-table { width: calc(100% - 100px); }
这个方法在目前我已知的方法里是最优的。
3、不要给Table组件的columns参数中添加width属性(未验证)
columns: [{ title: '标题', width: 200 // 不加这东西 }]
这个方法是网友给的,我没验证不知道有没有用。
补充知识:iview表格Table表头动态化实现
业务逻辑:根据日期,时间筛选跨度固定为3个月,获取数据,表格动态按月份展示,看图
表格还是这么简单
<Col span="8"> 时 间: <Date-picker type="month" format="yyyy-MM" :clearable='false' :editable='false' :options="startOption" v-model="searchParams.sDate" style="width: 200px"></Date-picker> 至  <Date-picker type="month" format="yyyy-MM" :clearable='false' :editable='false' :options="endOption" v-model="searchParams.eDate" style="width: 200px"></Date-picker> </Col> <Table stripe :columns="tableColumns" :data="tableData"></Table>
思路:固定时间跨度监听解决不赘述,搜索获取数据后,对tableColumns,进行处理,(push,splice,uhshift…都可以)引起DOM刷新,
处理tableColumns的函数
this.$utils.time.formatTime为封装好的时间处理函数,moment.js
// 初始化表头 columsInit () { let timeStr1 = this.$utils.time.formatTime(this.searchParams.sDate, 'YYYY-MM') let startMonth = timeStr1 + '月维护企业数' let timeStr2 = this.$utils.time.formatAddTime(this.searchParams.sDate, 'YYYY-MM', 1, 'months') let midMonth = timeStr2 + '月维护企业数' let timeStr3 = this.$utils.time.formatTime(this.searchParams.eDate, 'YYYY-MM') let endMonth = timeStr3 + '月维护企业数' this.tableColumns.splice(3, 4, { title: startMonth, align: 'center', render: (h, params) => { //下面业务逻辑直接不用看 // console.log(timeStr1) /* let arr = params.row.historyDataListDto || []; let obj = null arr.forEach((item, index) => { //有些人员,有些月份的数据没有 if (item.month == timeStr1) { obj = arr[index] } }) if (obj) { return h('a', { on: { click: () => { this.toDetail(params.row.uId, params.row.class2Id, obj.month, obj.month, obj.dirId) } } }, obj.whsNum) } else { return h('span', '--') } */业务逻辑 } }, { title: midMonth, align: 'center', render: (h, params) => { } }, { title: endMonth, align: 'center', render: (h, params) => { } }, { title: '平均', align: 'center', key: 'avgNum' } ) },
以上这篇解决iView Table组件宽度只变大不变小的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持猪先飞。
相关文章
- 这篇文章主要介绍了Bootstrap Table使用整理(二)的相关资料,需要的朋友可以参考下...2017-06-15
Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18Ant design vue table 单击行选中 勾选checkbox教程
这篇文章主要介绍了Ant design vue table 单击行选中 勾选checkbox教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-25- 这篇文章主要介绍了解决Antd Table表头加Icon和气泡提示的坑,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17
java 画pdf用itext调整表格宽度、自定义各个列宽的方法
这篇文章主要介绍了java 画pdf用itext调整表格宽度、自定义各个列宽的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-01-31- 这篇文章主要介绍了el-table树形表格表单验证(列表生成序号),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-01
- 这篇文章主要介绍了C# 遍历datatable字段名和value的案例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-01-19
- 将List类型转换成DataTable的通用方法,大家参考使用吧...2020-06-25
- 这篇文章主要介绍了C#获取变更过的DataTable记录的实现方法,对初学者很有学习借鉴价值,需要的朋友可以参考下...2020-06-25
vue element table中自定义一些input的验证操作
这篇文章主要介绍了vue element table中自定义一些input的验证操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18Mysql中 show table status 获取表信息的方法
这篇文章主要介绍了Mysql中 show table status 获取表信息的方法的相关资料,需要的朋友可以参考下...2016-03-12- 这篇文章主要介绍了C#从DataTable获取数据的方法,涉及C#操作DataTable的相关技巧,需要的朋友可以参考下...2020-06-25
- DataTable用于在.net项目中,用于缓存数据,DataTable表示内存中数据的一个表,在.net项目中运用C#将DataTable转化为CSV文件,接下来通过本文给大家提供一个通用的方法,感兴趣的朋友可以参考下...2020-06-25
vue 中使用 vxe-table 制作可编辑表格的使用过程
这篇文章主要介绍了vue 中使用 vxe-table 制作可编辑表格的使用过程,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-08-13- 这篇文章主要介绍了C# DataTable常见用法,帮助大家更好的理解和学习c#,感兴趣的朋友可以了解下...2020-11-03
- 这篇文章主要介绍了Bootstrap Table使用整理(四)之工具栏的相关资料,需要的朋友可以参考下...2017-06-15
- 如果你的实体类与数据库表是完全一致的。上代码:...2020-06-25
- 有时候我们从数据库获取的数据量太大,而我们不需要一次性显示那么多的时候,我们就要对数据进行分页处理了,让每页显示不同的数据。...2020-06-25
- 本篇文章主要介绍了c#获取字符串宽度的示例代码(字节数方法)。需要的朋友可以过来参考下,希望对大家有所帮助...2020-06-25