elementUI中如何在Table的列上面新增自定義屬性?

html代碼

<el-table-column label="競猜對(duì)象信息">
    <template scope="scope">{{scope.column}}</template>
</el-table-column>

顯示的信息內(nèi)容：

    { "order": "", "id": "el-table_1_column_2", "label": "競猜對(duì)象信息", "type": "default", "isColumnGroup": false, "align": null, "headerAlign": null, "sortable": false, "resizable": true, "showOverflowTooltip": false, "reserveSelection": false, "fixed": false, "filterMultiple": true, "filterOpened": false, "filteredValue": [], "filterPlacement": "", "minWidth": 80, "realWidth": 1837, "level": 1, "colSpan": 1, "rowSpan": 1 }

現(xiàn)在列上面只有 label="競猜對(duì)象信息" 這個(gè)信息是我自己加上去的，我想再在column中加一個(gè) id 屬性，應(yīng)該怎么加，或者有沒有哪個(gè)屬性可以讓我用來放一些自定義信息

回答

編輯回答

北城荒

不需要使用自定義屬性，能給自定義屬性賦值，在html中也就能獲取這個(gè)屬性

不需要使用:filtered-value

 <el-table-column v-for="game in gameList" :label="game.gameNameCn" :filtered-value="[game]">
    <template v-if="scope.row.gameList.some(item=>item.gameId ===scope.column.filteredValue[0].gameId)">

可以直接改為

 <el-table-column v-for="game in gameList" :label="game.gameNameCn">
    <template v-if="scope.row.gameList.some(item=>item.gameId === game.gameId)">

如上，不必多此一舉將 game的值賦給:filtered-value，直接能在標(biāo)簽內(nèi)使用game

使用:filtered-value屬性解決了我的問題

<el-table-column v-for="game in gameList" :label="game.gameNameCn" :filtered-value="[game]">
    <template v-if="scope.row.gameList.some(item=>item.gameId === scope.column.filteredValue[0].gameId)">

<el-table-column v-for="game in gameList" :label="game.gameNameCn" :filtered-value="[game]">

找到了一個(gè) column-key屬性可以使用，但覺得也不是很好啊，這個(gè)列并不是干這個(gè)用的，有沒有提供的專門自定義使用的屬性

<el-table-column label="競猜對(duì)象信息" :column-key="1">
    <template scope="scope">{{scope.column}}</template>
  </el-table-column>
  
  
  { "order": "", "id": "el-table_1_column_4", "columnKey": 1, "label": "競猜對(duì)象信息", "type": "default", "isColumnGroup": false, "align": null, "headerAlign": null, "sortable": false, "resizable": true, "showOverflowTooltip": false, "reserveSelection": false, "fixed": false, "filterMultiple": true, "filterOpened": false, "filteredValue": [], "filterPlacement": "", "minWidth": 80, "realWidth": 1837, "level": 1, "colSpan": 1, "rowSpan": 1 }

2018年8月17日 04:35

編輯回答

笑忘初

嗯嗯，明白了。設(shè)置column-key確實(shí)是個(gè)方法，但考慮到它的唯一性，如果你自定義的屬性可能會(huì)重復(fù)的話，就不合適了。相反，如果自定義屬性是id且唯一，不妨大膽用就好了。
一定要自定義一個(gè)不影響其他功能的屬性的話，可以使用render-header渲染表頭，在render期間對(duì)column增加屬性：

<el-table-column :render-header="renderHeader"></el-table-column>
...
renderHeader(h, { column, $index }) {
  column.test = 'test'
  console.log(column) // 這里打印下就知道新增屬性成功
  return (
    <span>競猜對(duì)象信息</span>
  )
}
...
// 這種方法還有局限性：因?yàn)楸眍^是render渲染的，`ElTable`組件自己的排序、篩選等功能就沒法在這一列使用了。

2018年7月3日 15:47