首页 > 其他分享 >Element textarea 行数限制,超过限定行数不允许输入

Element textarea 行数限制,超过限定行数不允许输入

时间:2023-06-26 10:14:01浏览次数:47  
标签:ab textarea item Element newVal oldVal 行数 输入 row

代码

methods: {
    // 获取行数
    getRow(val) {
      let row = 0
      val.split('\n').forEach(item => {
        if (item.length === 0) {
          row += 1 //如果一行只有回车符就是行数增加一行
        } else {
          row += Math.ceil(item.replace(/[\u0391-\uFFE5]/g, 'ab').length / 52)
          //item.replace(/[\u0391-\uFFE5]/g, 'ab'),这句只是把一个汉字替换成两个字母,进行长度划算
        }
      })
      return row
    }
},
watch: {
  'addEditForm.keywords': {
    handler(newVal, oldVal) {
      console.log(newVal, oldVal, 'oldVal')
      if (newVal && this.getRow(newVal) > 15) {
        this.addEditForm.keywords = oldVal //如果超过8行就把输入的删除
        this.$message({
          message: '最多输入15行',
          type: 'warning'
        })
      }
    },
    deep: true
  }
}

传送门:https://blog.csdn.net/weixin_44093204/article/details/126526330

标签:ab,textarea,item,Element,newVal,oldVal,行数,输入,row
From: https://www.cnblogs.com/DL-CODER/p/17504606.html

相关文章

  • vue根据element-ui实现下拉多选
    下拉多选element-ui实现效果组件代码<template><el-selectclass="maxwidth"v-model="showVal"multipleplaceholder="请选择":popper-append-to-body="false"@remove-tag="removetag"@......
  • elementplus vue 范围输入框
    <divclass="fv-rowmb-7"><labelclass="fs-6fw-semoboldmb-2">{{t("Numberofgroups")}}</label><el-form-itemprop="formInline.group"><el-inputcl......
  • 1.element表头居中内容左对齐, 2.自定义el-table中新增编辑表格不刷新的问题。
    一、<el-table :header-cell-style="{'text-align':'left'}">...<el-table-column:cell-style="{'text-align':'left'}">...</el-table-column></el-table> 二、this.$se......
  • element表格多选改为单选,且去除表头的多选框
    一、利用el-table自带方法selection-change(当选择项发生变化时触发该事件)关键代码:this.$refs.serialnoTable.clearSelection()this.$refs.serialnoTable.toggleRowSelection(val.pop()) 1.@selection-change="handleSelectionChange" 是重点改变点击选择框后的事件:<el-table......
  • elementui 分页page-size current-page 不随着组件改变问题
    问题出在未使用 .sync上!:current-page.sync="pageData.PageIndex":page-size.sync='pageData.PageSize'<el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":curren......
  • element ui 穿梭框宽度调整
    elementui穿梭框宽度调整<!--首先穿梭框设置ref用于引用--><el-transferref="grant_transfer"v-model="grant.value":data="grant.data"></el-transfer><script>//....../*穿梭框赋值后*/this.$nextTick(function(){th......
  • PostgreSQL合并多行数据为一行,string_agg函数
    通过id列来聚合belong_user_saved列,应用string_agg函数,只要id一样则把第二列通过逗号连接起来聚合前:聚合后:SELECT C.ID, string_agg(u.name::varchar,',')belong_user_savedFROM customerC leftjoincustomer_territoryctonct.customer=c.id leftjoinuser_......
  • 如何在Databricks中使用Spark进行数据处理与分析
    目录《如何在Databricks中使用Spark进行数据处理与分析》随着大数据时代的到来,数据处理与分析变得越来越重要。在数据处理与分析过程中,数据的存储、处理、分析和展示是不可或缺的关键步骤。在数据处理与分析中,Spark是一个强大的开源计算框架,它可以处理大规模分布式数据集,并提......
  • ElementUI 获取table中选中的行的两种方式
    Element获取table中选中的行的两种方式<el-tableref="multipleTable":data="data"style="width:100%"border@selection-change="selectionLineChangeHandle"></el-table>   //数据保存data(){return{dataonLineLi......
  • Polardb 核心存储 polarfs 是怎么进行数据存储的之核心构造(2)--译
    接上期,PolarFS主要由两层组成,一层是存储管理层,上面一层是文件系统元数据和提供文件系统API层,存储层负责所有节点的磁盘资源,并为每个数据库实例提供数据库卷。文件系统层在此基础上提供文件管理,负责文件系统元数据并发访问的互斥。下图为展示POLARFS集群中的主要组件,libpfs是一个......