使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能

使用Bootstrap + Vue.js来实现动态表格展示、新增和删除功能需要进行以下步骤：

步骤一：引入所需库

在项目中引入Bootstrap和Vue.js两个库，可以使用CDN或在本地引入。

<!-- 引入Bootstrap CSS文件 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<!-- 引入Vue.js文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>

步骤二：构建Vue实例

通过Vue实例来管理表格数据和操作，其中tableData是用来存储表格数据的数组，用来进行增、删、改等操作。

<div id="app">
    <table class="table">
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item, index) in tableData" :key="index">
                <td>{{ item.id }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.age }}</td>
                <td>
                    <a class="btn btn-info" href="#" @click="editItem(index)">编辑</a>
                    <a class="btn btn-danger" href="#" @click="deleteItem(index)">删除</a>
                </td>
            </tr>
        </tbody>
    </table>
</div>

<script>
new Vue({
    el: '#app',
    data: {
        tableData: [
            { id: 1, name: '张三', age: 20 },
            { id: 2, name: '李四', age: 22 },
            { id: 3, name: '王五', age: 24 }
        ]
    },
    methods: {
        editItem(index) {
            // 编辑操作
        },
        deleteItem(index) {
            // 删除操作
        }
    }
})
</script>

步骤三：实现新增功能

在Vue实例中新增addItem方法，用来接收用户输入的新数据，并将其添加到tableData数组中。

methods: {
    addItem() {
        let id = this.tableData[this.tableData.length - 1].id + 1;
        let name = this.$refs.name.value;
        let age = this.$refs.age.value;
        this.tableData.push({ id: id, name: name, age: age });
        this.$refs.name.value = '';
        this.$refs.age.value = '';
    },
    editItem(index) {
        // 编辑操作
    },
    deleteItem(index) {
        // 删除操作
    }
}

<div class="input-group mb-3">
    <input type="text" class="form-control" placeholder="请输入姓名" ref="name">
    <input type="text" class="form-control" placeholder="请输入年龄" ref="age">
    <div class="input-group-append">
        <button class="btn btn-primary" type="button" @click="addItem">新增</button>
    </div>
</div>

步骤四：实现删除功能

在Vue实例中的deleteItem方法可以删除指定索引位置的数据。

methods: {
    addItem() {
        // 新增操作
    },
    editItem(index) {
        // 编辑操作
    },
    deleteItem(index) {
        this.tableData.splice(index, 1);
    }
}

示例一：动态新增表格行

下面是一个动态新增表格行的示例，在input输入框中输入姓名和年龄，点击新增按钮即可在表格中动态添加数据。

<div id="app">
    <div class="input-group mb-3">
        <input type="text" class="form-control" placeholder="请输入姓名" ref="name">
        <input type="text" class="form-control" placeholder="请输入年龄" ref="age">
        <div class="input-group-append">
            <button class="btn btn-primary" type="button" @click="addItem">新增</button>
        </div>
    </div>
    <table class="table">
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item, index) in tableData" :key="index">
                <td>{{ item.id }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.age }}</td>
                <td>
                    <a class="btn btn-info" href="#" @click="editItem(index)">编辑</a>
                    <a class="btn btn-danger" href="#" @click="deleteItem(index)">删除</a>
                </td>
            </tr>
        </tbody>
    </table>
</div>

<script>
new Vue({
    el: '#app',
    data: {
        tableData: [
            { id: 1, name: '张三', age: 20 },
            { id: 2, name: '李四', age: 22 },
            { id: 3, name: '王五', age: 24 }
        ]
    },
    methods: {
        addItem() {
            let id = this.tableData[this.tableData.length - 1].id + 1;
            let name = this.$refs.name.value;
            let age = this.$refs.age.value;
            this.tableData.push({ id: id, name: name, age: age });
            this.$refs.name.value = '';
            this.$refs.age.value = '';
        },
        editItem(index) {
            // 编辑操作
        },
        deleteItem(index) {
            this.tableData.splice(index, 1);
        }
    }
})
</script>

示例二：动态删除表格行

下面是一个动态删除表格行的示例，在表格每一行的操作列中点击删除按钮可以删除该行数据。

<div id="app">
    <table class="table">
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item, index) in tableData" :key="index">
                <td>{{ item.id }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.age }}</td>
                <td>
                    <a class="btn btn-info" href="#" @click="editItem(index)">编辑</a>
                    <a class="btn btn-danger" href="#" @click="deleteItem(index)">删除</a>
                </td>
            </tr>
        </tbody>
    </table>
</div>

<script>
new Vue({
    el: '#app',
    data: {
        tableData: [
            { id: 1, name: '张三', age: 20 },
            { id: 2, name: '李四', age: 22 },
            { id: 3, name: '王五', age: 24 }
        ]
    },
    methods: {
        addItem() {
            // 新增操作
        },
        editItem(index) {
            // 编辑操作
        },
        deleteItem(index) {
            this.tableData.splice(index, 1);
        }
    }
})
</script>