bootstrap-table 增删以及嵌套input与select下拉框

前言：项目需求写个表格带新增删除，看了下项目原本使用的是jq+bootstrap+layui的一个组合，我的页面基本是用layui完成的，layui也有自己的table组件，官方文档很详细，所以第一版的时候是用的layui，但是写到一半的时候出了问题，在以往的项目中通常新增是用弹窗的形式将要新增的内容写入，再push到table的data数组中，此次需求是在表格里每行带input以及下拉选项框，layui有个坑是超出部分会直接隐藏，所以就没法选择下拉框，只好半途改用bootstrap-table这个组件，由于官方文档是英文的，看api费了点劲，所以就本次找资料跟踩过的坑做下总结！

 

这个是根据需求另外做的一个例子，就是点击新增就出来一个空白行，可以输入也可以选择下拉选项，废话不多说，我们开搞！

先把准备工作做好，引入css与js文件，

<--css---> 

<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="./bootstrap-table/bootstrap-table.min.css">

<--js---> 
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="./bootstrap/js/bootstrap.min.js"></script>
<script src="./bootstrap-table/bootstrap-table.js"></script>

HTML部分：

        <table id="table"></table>

        <button id="addBtn" onclick="add()">增加</button>

        <button onclick="getTab()">获取</button>

通过id来绑定table实例，

JS部分，生成table实例：

$('#table').bootstrapTable({
            columns: [{
                fi