vxe表格 限制输入框数据格式

文章展示了在Vue.js应用中,如何使用vxe-input组件处理用户输入的数字,通过v-model绑定和blur事件实现四舍五入保留一位小数的效果。当输入值不符合要求(如负数)时,会显示警告信息并清空输入。同时,文章强调了使用this.$set方法确保新增属性在响应式对象中是响应式的,以便视图更新。
摘要由CSDN通过智能技术生成
   <!-- 数字格式,保留一位小数,四舍五入 -->
                  <vxe-input
                    v-model="row[column.field]"
                    :readonly="isEdit"
                    @blur="   ({ value, $event }) =>  changeNumber(value,      		row,column.field) "   />
                    // 四舍五入 保留一位小数
    changeNumber(val, row, field) {
      const numberValue = val ? Number(val).toFixed(1) : "";
      if (numberValue < 0) {
        this.$message.warning("不可输入负数");
        this.$set(row, field, "");
      } else {
        this.$set(row, field, numberValue);
      }
    },
   
```this.$set()的作用 向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新,如果不使用$set(),数据不能响应到页面上

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要使用 vxe-grid 表格来显示数据,你需要按照以下步骤进行操作: 1. 首先,在你的项目中安装 vxe-table 包。你可以使用 npm 或 yarn 命令行工具来安装它。例如,运行以下命令来安装 vxe-table: ``` npm install vxe-table ``` 2. 在你的代码中引入 vxe-grid 组件。你可以在需要使用的组件中添加以下代码: ```javascript import 'vxe-table/lib/style.css' import { Grid } from 'vxe-table' export default { components: { 'vxe-grid': Grid }, // ... } ``` 3. 在模板中使用 vxe-grid 组件来显示数据。你可以在模板中添加以下代码: ```html <vxe-grid :data="tableData" :columns="tableColumns"></vxe-grid> ``` 上面的代码中,`tableData` 是你的数据数组,`tableColumns` 是你的列配置数组。你需要根据你的实际数据和列配置进行相应的调整。 4. 在你的 Vue 实例中,定义 `tableData` 和 `tableColumns` 数据。`tableData` 是一个包含你的表格数据的数组,而 `tableColumns` 则是一个包含列配置的数组。例如: ```javascript export default { data() { return { tableData: [ { id: 1, name: 'John Doe', age: 25 }, { id: 2, name: 'Jane Smith', age: 30 }, // ... ], tableColumns: [ { field: 'id', title: 'ID' }, { field: 'name', title: 'Name' }, { field: 'age', title: 'Age' }, // ... ] } }, // ... } ``` 上面的代码中,`tableData` 数组中的每个对象代表一行数据,而 `tableColumns` 数组中的每个对象定义了每列的字段和标题。 以上就是使用 vxe-grid 表格来显示数据的基本步骤。你可以根据 vxe-table 的文档进一步了解和调整表格的功能和样式。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值