Question

我正在尝试在vueJs中创建类似demo的东西，我正在使用bootstrap-vue中的b表。

这是我制作的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>

这是添加新行的方法：

        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
        },

我最终得到如下信息：picture 因为我是这个模板的新手，所以我没有任何想法

Answer 1

您只想添加一行吗？

在这种情况下，您可以在下面使用此解决方案：

<tr v-if="displayNewRow">
  <td> <input/> </td>
  <td> <input/> </td>
  <td> <input/> </td>
</tr>

然后在开始时将变量displayNewRow设置为false，但是当要显示它时，可以将此变量设置为true。

在bootstrap-vue中在没有jquery的情况下在b表中创建新的可编辑行

1 个答案: