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