Supports column formatter options returns dom element or jquery element

[weibangtuo]

🤔Type of Request

• Bug fix
• New feature
• Improvement
• Documentation
• Other

🔗Resolves an issue?

📝Changelog

• Core
• Extensions

💡Example(s)?

Example online

Code example

$('#table').bootstrapTable({
  columns: [
    {
      field: 'html',
      title: 'HTML',
      formatter: val => {
        const div = document.createElement('div')
  
        div.append('html')
        div.addEventListener('click', () => { alert('From html') })
        return div
      }
    },
    {
      field: 'jquery',
      title: 'jQuery',
      formatter: val => {
        const div = $('<div>')
  
        div.html('jquery')
        div.on('click', () => { alert('From jquery') })
        return div
      }
    },
    {
      field: 'vue3',
      title: 'Vue3 Component',
      formatter: val => {
        // import { h, render, getCurrentInstance } from 'vue'
        // import MyComponent from './MyComponent.vue'

        const vnode = h(MyComponent, props, children)
        const app = this.$.appContext // or const app = getCurrentInstance().appContext.app
        const div = document.createElement('div')

        vnode.appContext = app
        render(vnode, div)
        return div
      }
    },
    {
      field: 'echart',
      title: 'EChart Example',
      formatter: val => {
        const chartDom = document.createElement('div')

        // Size needs to be set because DOM is not mounted immediate and size cannot be obtained.
        chartDom.style.width = '300px'
        chartDom.style.height = '200px'

        const myChart = echarts.init(chartDom)
  
        myChart.setOption({
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [150, 230, 224, 218, 135, 147, 260],
              type: 'line'
            }
          ]
        })
        return chartDom
      }
    },
  ]
})

☑️Self Check before Merge

⚠️ Please check all items below before reviewing. ⚠️

• Doc is updated/provided or not needed
• Demo is updated/provided or not needed
• Changelog is provided or not needed

[wenzhixin]

• 可以使用 https://live.bootstrap-table.com/ 提供在线例子，写对应的分支即可。
• 文档应该需要更新下，把场景和支持的例子加上。

[wenzhixin]

vue + develop example: https://live.bootstrap-table.com/code/wenzhixin/18014

[weibangtuo]

Updated, Examle Online: https://live.bootstrap-table.com/code/weibangtuo/18018

[wenzhixin]

这个例子原来的写法失效了，帮忙修改下：
https://live.bootstrap-table.com/code/wenzhixin/18027

[wenzhixin]

Refs:

• Fixed td style bug and release a new version #7515
• Fix/td class #7521
• Fixed the id is not working bug in rowAttributes #7571
• Fixed data field attr not working bug #7584
• Fixed row style example not working bug bootstrap-table-examples#537