[英]Creating a new editable row in a b-table without jquery in bootstrap-vue
I'm trying to create something like this demo in vueJs, I'm using b-table from bootstrap-vue. 我正在尝试在vueJs中创建类似此演示的东西,我正在使用bootstrap-vue中的b表。
this is the b-table I've made 这是我做的b表
<b-row>
<b-col>
<b-table
show-empty
stacked="md"
:items="fetched_classf"
:fields="classes"
:current-page="currentPage"
:per-page="perPage"
:filter="filter"
:sort-by.sync="sortBy"
:sort-desc.sync="sortDesc"
:sort-direction="sortDirection"
@filtered="onFilteredDept"
id="tabel"
>
<template slot="id" slot-scope="row" style="text-align: left">
{{ row.value }}
</template>
<template class="add_desc" slot="class_desc" slot-scope="row">
{{ row.value }}
</template>
<template slot="action" slot-scope="row">
<b-button size="sm" class="mr-1" style="padding: 0rem 2px;">
<i class="fa fa-trash fa-lg "></i>
</b-button>
</template>
<template slot="row-details" slot-scope="row">
<b-card>
<ul>
<li v-for="(value, key) in row.item" :key="key">{{ key }}: {{ value }}</li>
</ul>
</b-card>
</template>
<template slot="selectedDept" slot-scope="{ rowSelected }">
<span v-if="rowSelected">✔</span>
</template>
</b-table>
</b-col>
</b-row>
and this is the method to add the new row: 这是添加新行的方法:
addRow(){
this.clicked = true;
var input = document.createElement("input");
input.setAttribute('type', 'text');
var parent = document.getElementById("tabel");
parent.appendChild(input);
this.idbaru = this.terbesar;
var id_incremented = this.idbaru+1
console.log ('id_incremented ',id_incremented)
this.fetched_classf.push({id: id_incremented, dept_id: id_incremented, class_desc: input})
this.terbesar = id_incremented
},
I end up getting something like this: picture I don't have any ideas since I'm new to this template 我最终得到这样的东西: 图片我没有任何想法,因为我是这个模板的新手
Do you want to only add one row? 您是否只想添加一行?
If it's the case, you can use this solution below: 如果是这样,您可以在下面使用此解决方案:
<tr v-if="displayNewRow">
<td> <input/> </td>
<td> <input/> </td>
<td> <input/> </td>
</tr>
And you set the variable displayNewRow to false at the beginning, but when you want to display it you can set this variable to true. 并在开始时将变量displayNewRow设置为false,但是当要显示它时,可以将此变量设置为true。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.