表格配置:
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>