行內編輯是很方便的編輯形式。通過各種嘗試，發現了三種方法。

1.bootstrap table 自帶的行內編輯：

也許是最簡單的bootstrap-table 表格行內編輯實現！！！

確認可用。方法簡便，不需要其他的擴充套件js,缺點也在此，擴充套件麻煩，對於前端小白來說，難度太大。

/**
         * @param {點選列的 field 名稱} field
         * @param {點選列的 value 值} value
         * @param {點選列的整行資料} row
         * @param {td 元素} $element
         */
        onClickCell: function(field, value, row, $element) {
            $element.attr('contenteditable', true);
            $element.blur(function() {
                let index = $element.parent().data('index');
                let tdValue = $element.html();

                saveData(index, field, tdValue);
            })
        }

a.獲取表格資料：

$table.bootstrapTable('getData')

b.新增資料

$table.bootstrapTable('insertRow', {
            index: 0,
            row: {
                id: '',
                name: '',
                price: ''
            }
        });

2.通過bootstrap-table-editable.js  ，需要引用相關的bootstrap-editable.js等檔案

參考bootstrap-table 行內編輯相關問題

裡面有內聯的樣式

參考行內編輯解決方案：x-editable

裡面有各種樣式，其中行內編輯是彈出式的。注意樣式使用時，列寬會發生變化，文章裡也提到了解決方案

{
                field: "DeptId",
                title: "部門",
                editable: {
                    type: 'select',
                    title: '部門',
                    source:[{value:"1",text:"研發部"},{value:"2",text:"銷售部"},{value:"3",text:"行政部"}]
                }
            }

3.通過bootstrap-table-edit.js。此樣式簡單，可擴充套件，比如下拉選單

參考BootStrap 可編輯表Table格

參考bootstrap table 的可編輯列表的例項     裡面有全套的js。

使用方法：

 {field:"JX_NAME",title:"所獲獎項明稱",align:"center",edit:{required:true,type:'text' }},  

   a.增加 

 $('#reportTable1').bootstrapTable('append',rows);

b.刪除 

$('#reportTable1').bootstrapTable('removeRow', deleteIndex);

   忘記 下面方法2能不能用

$('#table').bootstrapTable('removeByUniqueId', deleteIndex);

   $('#table').bootstrapTable('insertRow', {
                index: 0,
                row: {
                    id: '',
                    name: '',
                    price: ''
                }
            });

總結：各有優缺點。但是js最好統一。2最好看，1最簡單，3也好實現