首页bootstrap得表格怎么可以做填写表格

bootstrap得表格怎么可以做填写表格

时间: 2024-09-28 22:08:21 浏览: 21

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

在本文中，我们将探讨如何利用Bootstrap和Vue.js这两个强大的技术栈来实现一个具有动态展示、新增和删除功能的表格。Bootstrap作为流行的前端框架，提供了丰富的UI组件，而Vue.js则是一个轻量级的渐进式JavaScript框架，擅长构建用户界面。 ### 1. Bootstrap简介 Bootstrap是由Twitter开发并维护的前端框架，它提供了易于使用的CSS和JavaScript组件，用于创建响应式布局和移动设备优先的Web项目。Bootstrap中文网提供了详细的文档和示例，可以帮助开发者快速上手。 ### 2. Vue.js简介 Vue.js是一种轻量级的前端框架，它的核心库专注于视图层，易于学习，同时具有非常强大的功能。Vue.js允许开发者通过声明式渲染数据，并提供了组件化、指令系统和计算属性等功能，方便构建复杂的用户界面。 ### 3. 页面资源引入在实现动态表格功能之前，我们需要引入必要的库。Bootstrap依赖jQuery，因此需要先引入jQuery，接着引入Bootstrap的CSS和JS，以及Popper.js（用于Bootstrap的弹出元素定位）。最后引入Vue.js的库文件。 ```html <link ... /> <script ... /> ``` ### 4. 绘制表格 #### 工具栏区工具栏区域包含“新增”、“保存”和“删除”按钮，以及一个搜索框。使用Bootstrap的`btn`类为按钮设置样式，`data-toggle`和`data-target`属性用于触发模态框（用于新增操作）。`@click`事件绑定Vue.js的方法，例如`saveRows`和`delRows`。 ```html <div class="row mx-auto w-75"> ... <button type="button" class="btn btn-outline-info btn-sm" data-toggle="modal" data-target="#myModal">新增</button> <button type="button" class="btn btn-outline-primary btn-sm" @click="saveRows">保存</button> <button type="button" class="btn btn-outline-warning btn-sm" @click="delRows">删除</button> ... </div> ``` #### 表格区表格使用Bootstrap的`table`类创建，包括表头`thead`和表体`tbody`。在`tbody`中，使用`v-for`循环遍历Vue.js的数据对象`facilities`，显示每一行数据。每行数据前有一个复选框，其`v-model`绑定到`checkedRows`，以便于批量删除操作。 ```html <table class="table table-hover table-success"> ... <tbody> <tr v-for="(facility, index) in facilities"> <td><input type="checkbox" :value="index" v-model="checkedRows"></td> <td>{{index+1}}</td> <td>{{facility.code}}</td> ... </tr> </tbody> </table> ``` ### 5. 功能实现 - **动态展示**：Vue.js的响应式数据绑定使得表格中的数据能够随着后台数据的更新实时更新。 - **新增**：通过模态框添加新行数据，当点击“新增”按钮时，打开模态框，用户填写信息后提交，将新数据添加到`facilities`数组。 - **删除**：`delRows`方法可以遍历`checkedRows`数组，获取所有选中的行索引，然后从`facilities`中移除对应的元素。 ### 6. Vue.js数据和方法在Vue实例中，定义`facilities`数组存储表格数据，`checkedRows`数组存储被选中的行的索引，以及`addRow`、`saveRows`和`delRows`等方法，实现表格的动态操作。 ```javascript new Vue({ el: '#app', data: { facilities: [], // 表格数据 checkedRows: [] // 选中的行 }, methods: { addRow() {}, // 添加新行的方法 saveRows() {}, // 保存修改的方法 delRows() {} // 删除行的方法 } }) ``` ### 结论结合Bootstrap和Vue.js，我们可以轻松地创建一个功能完善的动态表格，不仅支持数据的动态展示，还具备新增和删除功能，极大地提高了开发效率和用户体验。在实际项目中，可以根据需求进一步扩展，如添加编辑功能、分页功能等。

Bootstrap 的表格（`<table>`）本身主要用于展示数据，如果你想让它支持用户填写数据，通常会将其与表单元素相结合，比如`<input>`、`<textarea>`等。这里有一个基础的例子，展示了如何在一个Bootstrap表格中包含表单输入项： ```html <table class="table table-bordered"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Email</th> <th>Phone</th> <th>Action</th> </tr> </thead> <tbody>  <tr> <td><input type="number" class="form-control" placeholder="ID" name="id[]"></td> <td><input type="text" class="form-control" placeholder="Name" name="name[]"></td> <td><input type="email" class="form-control" placeholder="Email" name="email[]"></td> <td><input type="tel" class="form-control" placeholder="Phone" name="phone[]"></td> <td><button type="button" class="btn btn-secondary">Save</button></td> </tr>  </tbody> </table> ``` 在这个例子中，每一列都有一个表单输入元素，用户可以直接编辑内容。当点击“Save”按钮时，你需要编写JavaScript或其他服务器端语言来处理提交的数据。

阅读全文