How vuejs outputs html in parameters within subcomponents

the case is that the project uses eliment ui, and encapsulates a subcomponent of the table component. The column of the internal fragment looks like this:

// 
<el-table-column v-for="(item,index) in fields" :key="index" :label="item.title" :width="item.width">
    <template slot-scope="scope" v-html="">
        {{ item.content ? item.content(scope.row) : scope.row[item.name] }} // 
    </template>
</el-table-column>

where fields is a loop for each field of the data, and there is no problem when the display of the field is returned as text by content ().

but if you want to customize this internal style, you must add a button,. Here is the data part of the component:

// data:
...
 fields : [
    {title :"" ,width:"180",content:(row)=>{ // 
        return new Date(row.start).format("MM-dd hh:mm") + " ~ " + new Date(row.end).format("hh:mm D") + (row.clash !=null ? " [] " : "" )
    }},
    {name:"user_name" ,  title :"" ,width:"80" },
    {name:"product_name", title :"" , content:(row)=>{ 
        return "<button></button>";  //->
    }},
    {name:"title", title :""},
    ...
],
...

when the result is output, let"s say "< button > where there is a problem < / button >" when the text is output.

I don"t know what to do. Solve. Is the god here?

Vue.js

Mar.12,2021

<el-table-column v-for="(item,index) in fields" :key="index" :label="item.title" :width="item.width"> // <template slot-scope="scope" v-html="item.content ? item.content(scope.row) : scope.row[item.name]"> </template> </el-table-column>

{title :'', content:function(h){ console.log(this.text); return h( 'el-tag',{ attrs: { size : "mini" }, on: { click: function (event) { alert(event) } } }, '' ); }},

: ``` // <template slot-scope="scope"> <node-content :content="item.content" :text="scope.row[item.name]" :row="scope.row"></node-content> // </template> // compments : components: { NodeContent: { props : { content:Function, text:{}, row: {} }, render: function render(h) { // content if(this.content) return this.content.call(h,...arguments); // else return h('span',this.text); } } }, ``` h createElement() createElementD rowcontent **** elementuitree data, ``` {title :'e', content:(row)=>{ return ( <el-button onClick={()=> this.showSigns(row.id) } type="text" size="small" ></el-button> )

: : <template slot-scope="scope"> <node-content :content="item.content" :row="scope.row"></node-content> </template> components: components: { NodeContent: { props: { content:{}, row:{}, }, render: function render(h) { return this.content(this.row); } } },

{name:'address', title :'' , content:(row)=>{ return <button on-click={($event) => this.handleClick($event) } ></button>; } } }, NodeContent: { props: { node:'', }, render(h) { const node = this.node return ( <span >{ node.item.content ? node.item.content(node.row) : node.row[node.item.name] }</span> ); } } }, <template slot-scope="scope" > <node-content :node="{'item':item,'row':scope.row}" ></node-content> </template>