avue-curd table表格错位 多出来空白的一列
1.页面样式存在 该代码时, 使得 avue 弹框内的 table 原本的 0px 的空白列被扩充,造成表格错位。解决方法一: 将上述代码 放到 表格的类 里面, 防止污染弹框内的table。1. 切换页面,列表表格错位(有时刚进入页面也会错位)方法三: 去掉表格每列的 width,使其自动填充。方法二:样式加入如下代码。
·
问题一描述:
1. 页面样式存在 该代码时, 使得 avue 弹框内的 table 原本的 0px 的空白列被扩充,造成表格错位
/deep/ .cell:empty::before{
content:'-';
}
至于为什么会有空白的一列,参考如下:
avue-curd为什么回出现多余的列?当作于拖动时会出现空白! · Issue #I1S7SK · smallwei/Avue - Gitee.com
解决方法一: 将上述代码 放到 表格的类 里面, 防止污染弹框内的table
.table-box {
/deep/ .cell:empty::before{
content:'-';
}
}
方法二:样式加入如下代码
// 解决.cell:empty::before存在时, avue 表格最后一个0px的空白列显示-,使表格错位问题
/deep/ .avue-crud table tr td:last-child {
display: none;
}
方法三: 去掉表格每列的 width,使其自动填充
[
{
label: '列一',
width: 90, //删除不要
prop: 'one',
},
{
width: 90, //删除不要
label: '列二',
prop: 'two',
}
]
方法四:加以下代码
/* 解决element-ui的table表格控件表头与内容列不对齐问题 */
.el-table th.gutter{
display: table-cell !important;
}
问题二描述:
1. 切换页面,列表表格错位(有时刚进入页面也会错位)
方法一:
// 解决AVue表格错位问题 activated () { this.$nextTick(() => { this.$refs.crud.doLayout() }) }, // 不行加一下延时试试 setTimeout(() => { this.$nextTick(() => { this.$refs.crud.doLayout() }) }, 100)
方法二:
mounted(){ this.$nextTick(() => { // 表格错位解决方法 this.$refs.crud.refreshTable(); }) },
方法三:
以上方法都不行,看看是不是设置了table某一列固定,将 fixed属性 去掉
更多推荐
已为社区贡献4条内容
所有评论(0)