BootstrapTable中的格式化程序与lit-html不兼容

Question

似乎在Bootstrap表格式化程序中返回lit-html元素会导致打印[object Object]，这是预期的行为，因为lit-html不是字符串，有没有办法解决这个问题？

最小示例

<script src="https://unpkg.com/@webcomponents/webcomponentsjs@next/webcomponents-loader.js"></script>
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<link href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>


<script type="module">
  import {LitElement, html} from 'https://unpkg.com/@polymer/lit-element@latest/lit-element.js?module';

  class MyElement extends LitElement {
  
  	constructor() {
        super();
        this.data = [{
                'id': 0,
                'name': 'Item 0',
                'price': '$0'
            },
            {
                'id': 1,
                'name': 'Item 1',
                'price': '$1'
            },
            {
                'id': 2,
                'name': 'Item 2',
                'price': '$2'
            },
            {
                'id': 3,
                'name': 'Item 3',
                'price': '$3'
            },
            {
                'id': 4,
                'name': 'Item 4',
                'price': '$4'
            },
            {
                'id': 5,
                'name': 'Item 5',
                'price': '$5'
            }
        ]
    }

    createRenderRoot() {
        return this;
    }

    static get properties() {
        return {
            str: String
        }
    }

    firstUpdated() {
        $("#table").bootstrapTable({
            columns: this._initTableColumns(),
            data: this.data,
        })
    }

    onClick(e) {
        console.log(e)
    }

    _initTableColumns() {
        return [{
                title: "ID",
                field: "id",
                formatter: this.fieldFormatter.bind(this),
            },
            {
                title: "NAME",
                field: "name",
                formatter: this.fieldFormatter.bind(this),
            },
            {
                title: "PRICE",
                field: "price",
                formatter: this.priceFormatter.bind(this),
            }
        ]
    }


    fieldFormatter(value, row) {
        return html `<p @click="${this.onclick}"> ${value}</p>`
    }
    
    priceFormatter(value, row) {
        return  `<p>${value}</P`
    }

    render() {
      return html `
        <table id="table">
          <thead>
            <tr>
              <th data-field="id">ID</th>
              <th data-field="name" date-formater="name-formatter">Item Name</th>
              <th data-field="price">Item Price</th>
            </tr>
          </thead>
        </table>
      `;
    }  
  }
	
  customElements.define('my-element', MyElement);
</script>

<my-element str="line1"></my-element>

Answer 1

尝试在html功能中删除fieldFormatter。

<script src="https://unpkg.com/@webcomponents/webcomponentsjs@next/webcomponents-loader.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>

<script type="module">
  import {LitElement, html} from 'https://unpkg.com/@polymer/lit-element@latest/lit-element.js?module';

  class MyElement extends LitElement {
  
  	constructor() {
        super();
        this.data = [{
                'id': 0,
                'name': 'Item 0',
                'price': '$0'
            },
            {
                'id': 1,
                'name': 'Item 1',
                'price': '$1'
            },
            {
                'id': 2,
                'name': 'Item 2',
                'price': '$2'
            },
            {
                'id': 3,
                'name': 'Item 3',
                'price': '$3'
            },
            {
                'id': 4,
                'name': 'Item 4',
                'price': '$4'
            },
            {
                'id': 5,
                'name': 'Item 5',
                'price': '$5'
            }
        ]
    }

    createRenderRoot() {
        return this;
    }

    static get properties() {
        return {
            str: String
        }
    }

    firstUpdated() {
        $("#table").bootstrapTable({
            columns: this._initTableColumns(),
            data: this.data,
        })
    }

    onClick(e) {
        console.log(e)
    }

    _initTableColumns() {
        return [{
                title: "ID",
                field: "id",
                formatter: this.fieldFormatter.bind(this)
            },
            {
                title: "NAME",
                field: "name",
                formatter: this.fieldFormatter.bind(this)
            },
            {
                title: "PRICE",
                field: "price",
                formatter: this.priceFormatter.bind(this)
            }
        ]
    }


    fieldFormatter(value, row) {
        return `<p @click="${this.onclick}">${value}</p>`;
    }
    
    priceFormatter(value, row) {
        return `<p>${value}</p>`;
    }

    render() {
      return html`
        <table id="table">
          <thead>
            <tr>
              <th data-field="id">ID</th>
              <th data-field="name" date-formater="name-formatter">Item Name</th>
              <th data-field="price">Item Price</th>
            </tr>
          </thead>
        </table>
      `;
    }  
  }
	
  customElements.define('my-element', MyElement);
</script>

<my-element str="line1"></my-element>