天天看點

vue實作表格中添加标簽,标簽是多個需要循環-render函數 for循環傳回

vue實作表格中添加标簽,标簽是多個需要循環--

實作:render函數 for循環傳回多個div

fields_columns:[
  {
    type: 'index',
    width: 60,
    align: 'center'
  },{
    title: '字段',
    sortable: true,
    ellipsis:true,
    width: 200,
    key: 'column_name'
  },{
    title: '類型',
    width: 200,
    ellipsis:true,
    key: 'column_type'
  },{
    title: '注釋',
    ellipsis:true,
    width: 300,
    key: 'commentString'
  },{
    title: "安全等級",
    width: 100,
    render: (h, params) => {
      let tag = params.row.tag_safe;
      if(tag){
        return h("div", [
          h("h-tag", {props: {color: "green"}},"安全"+tag+"級"),
        ]);
      }
    }
  },{
    title: "标簽",
    width: 300,
    render: (h, params) => {
      let tag = params.row.tag_content_list;
      return h("div", [
        tag.map(function (items,index){
          return h("h-tag", {props: {color: "yellow"}},items.tag_content)
        }),
        h("Button", {props: {icon:"ios-plus-empty",type:"dashed",size:"small"}}, "添加标簽")
      ]);      

效果:

vue實作表格中添加标簽,标簽是多個需要循環-render函數 for循環傳回

作者:少帥

您的支援是對部落客最大的鼓勵,感謝您的認真閱讀。

繼續閱讀