avue-crud的表格里面的textarea拖动导致的样式错乱

文章讲述了在使用Avue-Crud组件时,如何避免因textarea高度调整导致表格第一列和最后一列样式错乱的问题,通过移除配置中的相关选项并将列放入插槽来实现动态高度适应。
摘要由CSDN通过智能技术生成

表格配置:

option: {

                stripe: true,

                menu: true, // 显示操作栏

                menuWidth: 140,

                addBtn: false,

                refreshBtn: false,

                columnBtn: false,

                editBtn: false,

                delBtn: false,

                align: 'left',

                selection: false,

                index: true, //true为启用序号一列

                indexLabel: '序号',

                indexWidth: 80,

                maxHeight: 460,

                border: true,

                sortable: true,

  column: [                 

                    {

                        label: '问题',

                        prop: 'problem',

                        slot: true,

                    },

]

}

标签:<avue-crud :option="option" >

                            <template slot="problem" slot-scope="{ row }">

                                <el-input v-model="row.problem" type="textarea" size="small" placeholder="请输入"

                                    clearable>

                                </el-input>

                            </template>         </avue-crud>     

拖动textarea右下角拉大,会导致第一列和最后一列样式错乱,不能被textarea高度撑起,是因为第一列和最后一列绝对定位,脱离了位置

做法:不启用配置项,将这一列放入column中,然后用插槽;这一列高度就会随textarea的拖动高度变化

option: {

                stripe: true,

                menu: false, // 不显示操作栏

                menuWidth: 140,

                addBtn: false,

                refreshBtn: false,

                columnBtn: false,

                editBtn: false,

                delBtn: false,

                align: 'left',

                selection: false,

                index: false,

                indexLabel: '序号',

                indexWidth: 80,

                maxHeight: 460,

                border: true,

                sortable: true,

  column: [           

  {

                        label: '序号',

                        prop: 'index',

                        slot: true,

                    },

                    {

                        label: '问题',

                        prop: 'problem',

                        slot: true,

                    },

]

}

      <avue-crud :option="option" >                           

                            <template slot="index" slot-scope="{ row,index }">

                                {{ index + 1 }}

                            </template>

</avue-crud>

  • 3
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值