這次帶給大家ElTableColumn如何自訂內容,ElTableColumn自訂內容的注意事項有哪些,以下就是實戰案例,一起來看一下。
公司有一個新的需求,點擊ElTableColumn的頭部可以進行搜索,這個功能同事已經做出來了,但是使用有些不方便,自己就打算封裝成一個組件,學習一下。
ElTableColumn本來就是這個樣子的:
#要做成的是這個樣子:
我直接就放程式碼了,挨著挨著說明太多了。
程式碼的結構:
元件
import ElTableColumnPro from './ElTableColumnPro' ElTableColumnPro.install = function(Vue) { Vue.component(ElTableColumnPro.name, ElTableColumnPro); }; export default ElTableColumnPro; {{fomatMethod(scope.row[prop])}}
安裝##
import ElTableColumnPro from 'components/ElTableColumnPro/index' ... ... ... Vue.use(ElTableColumnPro)
使用
{{scope.row.content}}
以上是ElTableColumn如何自訂內容的詳細內容。更多資訊請關注PHP中文網其他相關文章!