最近开发的一个业务平台，是一个低代码业务平台。其中用到的了bootstrap-table组件。然而bootstrap-table本身不带编辑性能。
通过搜寻发现，网上大部分的解决方案都是应用x-editable, x-editable是一个通用的编辑能力组件，能够给任何元素都加上编辑能力，功能强大，能够编辑文本，数字，选项，工夫等等各种类型的数据。
然而x-editable有一个比拟不好的中央，x-editable的编辑模式是弹框的模式，如下图所示：
我心愿的是间接在单元格进行编辑的行内编辑，所以感觉x-editable并不是很适合。 然而发现并没有其余更好的计划，于是本人入手写了一个简略的组件bootstrap-table-editor。
bootstrap-table-editor能够用于BootstrapTable行内编辑，反对文本，数字，下拉选项等。
编辑形式如下所示：
要实现图中所示，首先是要引入bootstrap-table-editor：
<script src="./libs/bootstrap-table-editor.js"></script>而后在表格的属性中指定editable未true：
let tableOptions = { columns:columns, editable:true, //editable须要设置为 true }而后在须要编辑的列下面指定editable属性，该属性下面能够指定编辑器的类型，目前反对文本，数字和下拉框。
let columns = [{ title: "编号", field: "id", sortable: true, width:200, editable:false, },{ title: "月份", field: "month", sortable: true, width:200, formatter:function(v){ return v + "月" }, editable:{ type:"select", options:{ items:[{ value:1, label:"1月", },{ value:2, label:"2月", },{ value:3, label:"3月", },{ value:4, label:"4月", },{ value:5, label:"5月", }] } } },{ title: "部门", field: "department", sortable: true, width:200, editable:{ type:"select", options:{ items:[ "技术部","生产部","管理中心" ] } } },{ title: "管理费用", field: "fee", sortable: true, width:200, editable:{ type:"number" } },{ title: "备注", field: "comment", sortable: true, width:200, editable:true, // editable:{ // type:"text" // } },];其中editable为true的时候，默认是文本编辑器，指定编辑器类型未select时候，须要指定下拉框的items。
以上是次要的阐明，目前该组件性能还比拟间的，然而曾经适宜了咱们业务零碎的须要了。如果客户须要更加丰盛的性能，能够基于组件进行扩大，该组件的开源地址如下：
https://gitee.com/netcy/boots...
其中包含了组件代码和相干示例代码。
有趣味的能够关注。
更多优良内容，欢送关注公众号 “易施管理软件EasyBPM” 。