Use editable extension of Bootstrap Table in Bootstrap v4

Since x-editable has not been updated for a long time, so Bootstrap v4 is not supported, but many people ask how to use editable in v4 of Bootstrap Table. Here we have tried on how to use it. You can see that someone has submitted PR and added support for Bootstrap v4. Here we use https://github.com/Talv/x-editable/tree/develop directly. Since it is not published to npm, we can only use the link on GitHub directly, here we use the jsdelivr tool.

Use Bootstrap Table in Webpack

Because I saw the problem saying using the latest version of Bootstrap Table in Webpack will fail, I tried how to use Bootstrap Table in Webpack from scratch. First, according to the Getting Started documentation of Webpack, we created a test project webpack-bootstrap-table, here we use webpack-dev-server to start the service: 1 2 3 4 mkdir webpack-bootstrap-table cd webpack-bootstrap-table yarn init -y yarn add webpack webpack-cli webpack-dev-server -D Next, add bootstrap-table and the required dependencies jquery and bootstrap:

Formatter Use Vue Component

Starting with v1.15.2, the Bootstrap Table adds support for the Bootstrap Table Vue component. We can use the two column options formatter and events to implement custom display and event listen for columns: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 <template> <BootstrapTable :columns="columns" :data="data" :options="options" /> </template> <script> import BootstrapTable from 'bootstrap-table/dist/bootstrap-table-vue.