鍍金池/ 問答/HTML/ element中的標(biāo)簽控件怎么在內(nèi)容中加入標(biāo)簽?

element中的標(biāo)簽控件怎么在內(nèi)容中加入標(biāo)簽?

<div style="margin-bottom: 20px;">
<el-button

size="small"
@click="addTab(editableTabsValue2)"
add tab

</el-button>
</div>
<el-tabs v-model="editableTabsValue2" type="card" closable @tab-remove="removeTab">
<el-tab-pane

v-for="(item, index) in editableTabs2"
:key="item.name"
:label="item.title"
:name="item.name"
{{item.content}}

</el-tab-pane>
</el-tabs>
<script>
export default {

data() {
  return {
    editableTabsValue2: '2',
    editableTabs2: [{
      title: 'Tab 1',
      name: '1',
      content: 'Tab 1 content'
    }, {
      title: 'Tab 2',
      name: '2',
      content: 'Tab 2 content'
    }],
    tabIndex: 2
  }
},
methods: {
  addTab(targetName) {
    let newTabName = ++this.tabIndex + '';
    this.editableTabs2.push({
      title: 'New Tab',
      name: newTabName,
      content: 'New Tab content'
    });
    this.editableTabsValue2 = newTabName;
  },
  removeTab(targetName) {
    let tabs = this.editableTabs2;
    let activeName = this.editableTabsValue2;
    if (activeName === targetName) {
      tabs.forEach((tab, index) => {
        if (tab.name === targetName) {
          let nextTab = tabs[index + 1] || tabs[index - 1];
          if (nextTab) {
            activeName = nextTab.name;
          }
        }
      });
    }
    
    this.editableTabsValue2 = activeName;
    this.editableTabs2 = tabs.filter(tab => tab.name !== targetName);
  }
}

}
</script>
上面是element文檔中的實(shí)例,我想請(qǐng)教的是editableTabs2這個(gè)數(shù)據(jù)中如何放入組件標(biāo)簽?比如<left></left>,直接在頁(yè)面上寫是可以的,但是我的標(biāo)簽是動(dòng)態(tài)添加的,所以要放在數(shù)據(jù)中,請(qǐng)問該怎么操作?

回答
編輯回答
妖妖

使用v-html
如<div v-html="item.content"></div>

2017年2月15日 13:42
編輯回答
九年囚

可以使用動(dòng)態(tài)組件

<el-tab-pane
    :key="item.name"
    v-for="(item, index) in editableTabs"
    :label="item.title"
    :name="item.name"
  >
    <component v-if='iscomponent' :is="item.component"></component>
    <div v-else>{{item.content}}</div>
  </el-tab-pane>
2018年5月17日 22:34