Vue+element ui 表单中自适应文本高度的文本域及表格中列数据展示_vue autosize-程序员宅基地

技术标签: Vue  vue  elementui  

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>
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_42870215/article/details/109469499

智能推荐

hibernate 的dialect(方言)配置_hibernate.dialect配置-程序员宅基地

文章浏览阅读4.2k次。转自:https://blog.csdn.net/baidu_40487407/article/details/93042568RDBMS方言RDBMSDialectDB2org.hibernate.dialect.DB2DialectDB2 AS/400org.hibernate.dialect.DB2400DialectDB2 OS390org.hibern..._hibernate.dialect配置

Linux---wifi驱动移植及调试(SSV6x5x)_linux wifi驱动-程序员宅基地

文章浏览阅读4.4k次,点赞2次,收藏21次。南方硅谷ssv6x5x驱动移植_linux wifi驱动

Win10系统怎么使用U盘重装(图文并茂)_windows10下载u盘安装-程序员宅基地

文章浏览阅读6k次,点赞6次,收藏56次。本教程一共分为了10个步骤,每一个步骤都有图片,相对来说非常详细了,欢迎大家讨论与学习!_windows10下载u盘安装

MyEclipse中Maven设置jdk版本1.8_解决报错问题-程序员宅基地

文章浏览阅读3k次。今天安装了jdk1.8、tomcat8、和maven3.5.2,弄好后在myeclipse新建了一个maven项目,项目默认是jdk1.5,如图一,我把它改成jdk1.8,项目就报错了,如图二,然后update project后又变成jdk1.5了。图一:图二:解决方法:打开maven项目的pom.xml文件, 在build节点下加入下面这段代码 ,然后在选中项目右键--》maven4myecli..._myeclipse jdk没有1.8

html怎样让文字自动换行,CSS怎么设置文字自动换行?-程序员宅基地

文章浏览阅读3k次。CSS怎么设置文字自动换行?下面本篇文章就给大家介绍css设置文字(特别是连续的数字和英文)自动换行的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。关于换行问题,正常字符的换行是比较合理的,但连续的数字和英文字符常常将容器撑大,而不换行,就挺让人头疼了,这就需要进行强制自动换行了。示例:html代码:正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space..._css 让文字根据html源码一样换行

个人联想Thinkpad X1 carbon 笔记本遇到的问题及解决办法_thinkpad x1carbon开机黑屏-程序员宅基地

文章浏览阅读214次。新买的一台联想Thinkpad X1 carbon 12代笔记本,不知道怎么搞的,突然有一天启动后会出现一段黑屏时间,然后等一段时间才会正常,非常地烦人。打电话给联想客服只提供了附近的维修地点,但那得花时间跑去啊。今天下午自己摸索终于解决问题了。没什么好办法,我开始卸载电脑上很多的软件,一是不想用了,二是想卸载的这些软件可能就是导致这个问题出现的原因,在卸载的时候看到电脑上的相关应用,但是在点开相机应用的时候竞然发现相机不能用了。怎么这么奇怪,我想到我以前确实是设置了一下相机的权限,难道是这个问题引起的。_thinkpad x1carbon开机黑屏

随便推点

高通平台8953 Linux DTS(Device Tree Source)设备树详解之一(背景基础知识篇)_高通提取dtb-程序员宅基地

文章浏览阅读5.8k次,点赞3次,收藏61次。本系列导航:高通平台8953 Linux DTS(Device Tree Source)设备树详解之一(背景基础知识篇)高通平台8953 Linux DTS(Device Tree Source)设备树详解之二(DTS设备树匹配过程)高通平台8953 Linux DTS(Device Tree Source)设备树详解之三(高通MSM8953 android7.1实例分析篇)一.什么是DTS?为..._高通提取dtb

ubuntu上opencv源码编译_libjasper-dev源码-程序员宅基地

文章浏览阅读301次。安装必备包sudo apt-get install build-essential cmake libjpeg-dev libtiff5-dev libjasper-dev安装gtkfor opencv3.2 and above:sudo apt-get install libgtk-3-devfor opencv2.4.x:sudo apt-get install libgtk2.0-dev安装v4l2sudo apt-get install v4l2ucp v4l-ut._libjasper-dev源码

安卓设备连接Unity Profiler进行性能分析_unity profile 手机-程序员宅基地

文章浏览阅读4.6k次,点赞2次,收藏7次。内容会持续更新,有错误的地方欢迎指正,谢谢!方式一:手机上运行游戏,以ADB方式连UnityProfiler分析游戏性能1.安卓环境:jdk、sdk:cmd(Win+R打开界面并输入cmd) 里直接输入 java 能正常输出即可 https://www.jianshu.com/p/21babde25dd5 adb:cmd 里直接输入 adb 能正常输出即可 https://www..._unity profile 手机

海思3559AV100实现8k文件编码_rk_mpi_cal_comm_getpicbuffersize-程序员宅基地

文章浏览阅读913次,点赞13次,收藏27次。有些小改动需要在common中改,都很简单就不写了,看一下就知道,另外我这边只测试了8k的一帧编码,如需连续编码视频需要再扩展一下,我这边由于公司项目安排就没再继续做了,测试出来8k文件编码的结果如下,颜色偏差是因为我的YUV和板子支持的YUV的存储顺序不一致,这里时间关系也就不调了,也算是顺利实现了芯片的8k文件编码。第二个函数是SAMPLE_VENC_CheckSensor,应该是检查镜头的分辨率支不支持要编的尺寸,这里我们先试的4k,所以也可以不管这个。_rk_mpi_cal_comm_getpicbuffersize

Android BLE 蓝牙通信库,2024年最新应届生面试销售岗位的面试问题技巧_android蓝牙通信-程序员宅基地

文章浏览阅读919次,点赞12次,收藏10次。然后根据自定义的协议,解析对应的 BeaconItem 中的 bytes,首先创建一个 BeaconParser,传入对应的 BeaconItem,然后根据协议不断读取数据, 如果协议中某个字段占 1 个字节,则调用 readByte,若占用两个字节则调用 readShort,如果要取某个字节的某个 bit 则调用 getBit。// 获取第 1 字节的第 1bit。可以在广播中携带设备的自定义数据,用于设备识别,数据广播,事件通知等,这样手机端无需连接设备就可以获取设备推送的数据。_android蓝牙通信

推荐文章

热门文章

相关标签