vueテーブルはボタンをクリックしてシーケンス番号のあるオプションの行を手動で追加することを実現します

4132 ワード

行を追加するテーブル:
-table
   :data="form.options"
   style="width: 100%" size='small' empty-text='    ' border>
   -table-column
       label="  "
       width="60">
       >
   -table-column>
   -table-column
        prop="label"
        label="label"
        width="60">
    -table-column>
    -table-column
        label="  " show-overflow-tooltip>
        >
    -table-column>
-table>
<!---->
-button type="text" v-if="form.options.length<4" @click="addOption">  -button>

dataの中には
data(){
   return{
       form:{
           options:[]
       }
   }
}

methodsの中(ポイント):
//                
addOption(){
    let option = {}
    let label = ''
    //             label  
    switch(this.form.options.length){
        case 0:
            label = 'A';
            break;
        case 1:
            label = 'B';
            break;
        case 2:
            label = 'C';
            break;
        case 3:
            label = 'D';
            break;
    }
    option.label = label
    this.form.options.push(option)
}