Vue+element ui 表单中自适应文本高度的文本域及表格中列数据展示
Vue+element ui 表单中自适应文本高度的文本域及表格中列数据展示:通过设置autosize属性可以使得文本域的高度能够根据文本内容自动进行调整,并且autosize还可以设定为一个对象,指定最小行数和最大行数。...
·
1.通过设置 autosize
属性可以使得文本域的高度能够根据文本内容自动进行调整,并且 autosize
还可以设定为一个对象,指定最小行数和最大行数。
表单中设置如下:
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-form-item label="说明" prop="remark">
<el-input
v-model="form.remark"
type="textarea"
placeholder="请输入说明"
:autosize="{ minRows: 1, maxRows: 50 }"
/>
</el-form-item>
</el-form>
表格中设置如下:
<el-table v-loading="loading" :data="tableList" border>
<el-table-column label="序号" align="center" type="index" width="50"></el-table-column>
<!--header-align:设置表头是否居中;align:设置内容是否居中-->
<el-table-column label="说明" align="left" header-align="center" prop="remark" min-width="400px">
<template slot-scope="scope">
<!--方式1:和表格中设置一样展示-->
<!-- <el-input v-model="scope.row.remark" type="textarea" disabled :autosize="{ minRows: 1, maxRows: 50}"/> -->
<!--方式2:截取换行字符串-->
<div v-for="(item,index) in scope.row.remark.split('\n')" :key="index">{{item}}</div>
</template>
</el-table-column>
</el-table>
更多推荐
已为社区贡献6条内容
所有评论(0)