Vue学习-iview表格列动态隐藏后，列宽度不再自适应

最新推荐文章于 2023-11-06 10:10:47 发布

Java_Scholar0

最新推荐文章于 2023-11-06 10:10:47 发布

阅读量1k

点赞数

分类专栏： Vue 文章标签： vue.js 学习

本文链接：https://blog.csdn.net/Java_Scholar0/article/details/126622032

版权

Vue 专栏收录该内容

16 篇文章

订阅专栏

解决前图片:

table位于modal弹框中

在这里插入图片描述

解决方法: 1.使modal显隐优先于表格columns初始化。2.xxxColumns中列宽度使用minWidth

以下为部分代码：

<Modal
      title="xxxTitle"
      v-model="xxxModal"
      :mask-closable='false'
      draggable
      :width="xxxWidth"
    >
      <Card>
        <Row>
            <Table :loading="xxxLoading"
                height="400"
                border
                :columns="xxxColumns"
                :data="xxxData"
                ref="xxxTable"
                sortable="custom"></Table>
        </Row>
        <Row type="flex"
            justify="end"
            class="page">
            <Page :current="xxxSearchForm.pageNum"
                :total="xxxTotal"
                :page-size="xxxSearchForm.pageSize"
                @on-change="changxxxPage"
                @on-page-size-change="changexxxPageSize"
                :page-size-opts="[10,20,50]"
                size="small"
                show-total
                show-elevator
                show-sizer></Page>
        </Row>
        </Card>
        <div slot="footer">
        </div>
    </Modal>


	showXxxDeatil(v,b){
	  //将modal初始化优先于columns初始化
      this.xxxModal = true;
      this.filterColumns(1);
    },
    //过滤列
    filterColumns(b){
      if(b == "1"){
        return this.xxxColumns = this.xxxColumns.filter(col=> col.key != "action");
      }
    },

解决后图片:

在这里插入图片描述