vueテーブルはボタンをクリックしてシーケンス番号のあるオプションの行を手動で追加することを実現します
4132 ワード
行を追加するテーブル:
dataの中には
methodsの中(ポイント):
-table
:data="form.options"
style="width: 100%" size='small' empty-text=' ' border>
-table-column
label=" "
width="60">
-scope="{$index}">
{{$index + 1}}
>
-table-column>
-table-column
prop="label"
label="label"
width="60">
-table-column>
-table-column
label=" " show-overflow-tooltip>
-scope="{row}">
-input v-model="row.name" size='small'> -input>
>
-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)
}