VUE+table表格里面嵌套输入框:

 1:直接在table里面家template:

<el-table-column prop="adhesiveTape" header-align="center" align="center" label="胶带(米)">
            <template slot-scope="scope">
              <span v-if="!editStatus">{{scope.row.adhesiveTape}}</span>
              <el-input v-else v-model="scope.row.adhesiveTape" placeholder="请输入"></el-input>
            </template>
</el-table-column>

2:editStatus:

//编辑
      editData() {
        this.editStatus = !this.editStatus
        if(!this.editStatus){
          this.insert = '编辑'
          this.$nextTick(()=>{
            this.getDataList();
          })
        }else{
          this.insert = '取消编辑'
        }
      },

3:点击编辑:取消编辑

 <el-button size="small" type="primary" v-if="status == '1' || status =='2' || status == '4' " @click="editData()">{{insert}}</el-button>

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要在ant design vue + TypeScript中对输入框进行验证,可以使用内置的表单验证规则和自定义验证规则。 首先,在模板中使用`<a-form-item>`包装输入框,并指定`name`属性和`rules`属性。`name`属性用于唯一标识该表单项,`rules`属性用于定义验证规则。 ```html <template> <a-form :form="form"> <a-form-item label="用户名" name="username" :rules="usernameRules"> <a-input v-model="username" /> </a-form-item> </a-form> </template> ``` 接下来,在组件中定义验证规则。可以使用内置的验证规则,如`required`、`min`、`max`等,也可以自定义验证函数。这里我们将验证规则定义为一个对象,并使用`ValidationRule`类型来指定规则的类型。 ```typescript <script lang="ts"> import { Component, Vue } from 'vue-property-decorator'; import { ValidationRule } from 'ant-design-vue/types/form/form'; @Component export default class MyComponent extends Vue { private form = this.$form.createForm(this); private username = ''; private get usernameRules(): ValidationRule[] { return [ { required: true, message: '请输入用户名' }, { min: 3, max: 10, message: '用户名长度在3到10之间' }, { validator: this.checkUsername } ]; } private checkUsername(rule: any, value: string, callback: any) { if (!/^[a-zA-Z0-9]+$/.test(value)) { callback(new Error('用户名只能包含字母和数字')); } else { callback(); } } private submitForm() { this.form.validateFields((errors, values) => { if (errors) { console.log('表单验证不通过', errors); } else { console.log('表单验证通过', values); } }); } } </script> ``` 在上面的例子中,我们使用了`ValidationRule`类型来定义了验证规则的类型,并将`usernameRules`定义为一个返回`ValidationRule`数组的计算属性。同时,我们也将`checkUsername`方法的参数类型指定为`any`和`string`,并使用`callback`参数来返回验证结果。 最后,需要在提交表单时执行验证。可以使用`this.form.validateFields`方法来执行验证,如果验证通过,则执行提交操作。 ```typescript <script lang="ts"> import { Component, Vue } from 'vue-property-decorator'; import { ValidationRule } from 'ant-design-vue/types/form/form'; @Component export default class MyComponent extends Vue { private form = this.$form.createForm(this); private username = ''; private get usernameRules(): ValidationRule[] { return [ { required: true, message: '请输入用户名' }, { min: 3, max: 10, message: '用户名长度在3到10之间' }, { validator: this.checkUsername } ]; } private checkUsername(rule: any, value: string, callback: any) { if (!/^[a-zA-Z0-9]+$/.test(value)) { callback(new Error('用户名只能包含字母和数字')); } else { callback(); } } private submitForm() { this.form.validateFields((errors, values) => { if (errors) { console.log('表单验证不通过', errors); } else { console.log('表单验证通过', values); } }); } } </script> ``` 这样,我们就可以在ant design vue + TypeScript中对输入框进行验证了。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值