iview table添加input框,且校验


方法一 render渲染

  {
          title: "用户名",
          key: "stockPrice",
          render: (h, params) => {
            return h("Form", [
              h("Input", {
                style: {
                  marginLeft: "4px",
                  width: "150px"
                },
                props: {
                  type: "text",
                  value: params.row.stockPrice //使用data中的key
                },
                on: {
                  input: event => {
                    this.data1[params.index].stockPrice= event;//双向绑定
                    console.log(event,this.data1);
                  }
                }
              }),
            ]);
          }
        },

  

 方法二  templete模板

         <Table
              :columns="columns1"
              :data="data1"
              style="margin-bottom: 20px;"
              v-if="userForm.setUp == '否'"
              ref="table"
            >
              <template slot-scope="{ row, index }" slot="name">
                <Form :model="row">
                  <FormItem
                    prop="name"
                    :rules="{required:true , message: '必填项', trigger: 'change'}"
                    class="formRule"
                  >
                    <Input type="text" v-model="row.name" style="width:120px"/>
                  </FormItem>
                </Form>
              </template>
              </template>
            </Table>      

          columns1 定义 " slot="name"  data1中定义name
    
       

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM