表格嵌套输入框加校验 vue

1、表格数组需要el-form的optForm点出来

<el-form  ref="optForm" :model="optForm" :rules="rules" label-width="130px">
          <el-table
            :data="optForm.kpSettleList"
            ref="table2">
     <el-table-column  label="手机号" prop="phone" min-width="130" >
              <template slot-scope="scope">
                <el-form-item :prop="'kpSettleList.' + scope.$index +'.phone'" :rules='rules.phone' label-width="0px">
                    <el-input v-model="scope.row.phone"></el-input>
                </el-form-item>
              </template>
            </el-table-column>
</el-table>
</el-form>

2、在data里面定义rules

data() {
    return {
      optForm:{
        kpSettleList:[],
      },
      rules:{
        phone: [
          { required: true, message: '该项为必填项', trigger: 'blur' },
          { validator:rules.FormValidate.Form().validatePhone}
        ],
      },
    }
  },

  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用自定义组件来实现在表格嵌套输入框和上传图片。 1. 创建自定义组件 在Vue项目中创建一个新的组件,可以命名为“TableInputImage”,并在该组件中定义一个上传图片和输入框。 ``` <template> <div> <input type="text" v-model="inputValue" /> <input type="file" @change="onFileChange" /> <img :src="imageUrl" v-if="imageUrl" /> </div> </template> <script> export default { data() { return { inputValue: '', imageUrl: '', }; }, methods: { onFileChange(e) { const file = e.target.files[0]; const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = () => { this.imageUrl = reader.result; }; }, }, }; </script> ``` 2. 在表格中使用自定义组件 在表格中使用自定义组件,可以将“TableInputImage”组件作为表格中的一个列的渲染函数。例如: ``` <template> <div> <el-table :data="tableData"> <el-table-column label="名称" prop="name"></el-table-column> <el-table-column label="图片"> <template slot-scope="scope"> <table-input-image></table-input-image> </template> </el-table-column> </el-table> </div> </template> <script> import TableInputImage from '@/components/TableInputImage'; export default { components: { TableInputImage, }, data() { return { tableData: [ { name: '商品1', image: '' }, { name: '商品2', image: '' }, { name: '商品3', image: '' }, ], }; }, }; </script> ``` 在这个例子中,“TableInputImage”组件被嵌套在“el-table-column”标签中,并且作为一个插槽来渲染。 3. 获取表格中的数据 为了获取表格中的数据,可以在“TableInputImage”组件中触发一个自定义事件,并将输入框和图片的值传递回父组件。例如: ``` <template> <div> <input type="text" v-model="inputValue" @input="onInput" /> <input type="file" @change="onFileChange" /> <img :src="imageUrl" v-if="imageUrl" /> </div> </template> <script> export default { data() { return { inputValue: '', imageUrl: '', }; }, methods: { onInput() { this.$emit('input', { inputValue: this.inputValue, imageUrl: this.imageUrl, }); }, onFileChange(e) { const file = e.target.files[0]; const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = () => { this.imageUrl = reader.result; this.onInput(); }; }, }, }; </script> ``` 在这个例子中,当输入框或图片发生变化时,将触发一个“input”事件,并将输入框和图片的值作为一个对象传递回父组件。在父组件中,可以监听这个事件并更新表格中的数据。例如: ``` <template> <div> <el-table :data="tableData"> <el-table-column label="名称" prop="name"></el-table-column> <el-table-column label="图片"> <template slot-scope="scope"> <table-input-image @input="onInput(scope.$index, $event)"></table-input-image> </template> </el-table-column> </el-table> </div> </template> <script> import TableInputImage from '@/components/TableInputImage'; export default { components: { TableInputImage, }, data() { return { tableData: [ { name: '商品1', image: '' }, { name: '商品2', image: '' }, { name: '商品3', image: '' }, ], }; }, methods: { onInput(index, data) { this.tableData[index].inputValue = data.inputValue; this.tableData[index].imageUrl = data.imageUrl; }, }, }; </script> ``` 在这个例子中,“TableInputImage”组件触发了一个“input”事件,并将输入框和图片的值作为一个对象传递回父组件。在父组件中,可以监听这个事件并更新表格中的数据,通过索引来定位到正确的行。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值