饿了么表格二次封装具名插槽append的分装实现

我自横刀向天笑,去留肝胆两昆仑。这篇文章主要讲述饿了么表格二次封装具名插槽append的分装实现相关的知识,希望能为你提供帮助。
【饿了么表格二次封装具名插槽append的分装实现】1)在封装组件中使用table具名插槽,并自定义具名插槽,对外开发使用:commonTable

< template> < div class="common-table-style"> < el-table :data="https://www.songbingjia.com/android/tableData" tooltip-effect="dark" border highlight-current-row :max-height="maxHeight" :empty-text="emptyText" @sort-change="sortChange" @filter-change="filterChange" @selection-change="selectionChange" ref="commonRef" > < slot> < /slot> < div slot="append"> < slot name="xxxx"> < /slot> < /div> < /el-table> < /div> < /template>

< script> export  default  {     props:  {         tableData:  {             type:  Array,             default:  ()  =>   {}         },         maxHeight:  {             type:  Number,             default:  null         },         emptyText:  {             type:  String,             default:  "暂无数据"         }     },     methods:  {         sortChange(e)  {             this.$emit("sortChange",  e);         },         filterChange(e)  {             this.$emit("filterChange",  e);         },         selectionChange(e)  {             this.$emit("selectionChange",  e);         }     } }; < /script> 2)封装组件的使用方法:
< template> < div v-loading="loading"> < sn-table :tableData="https://www.songbingjia.com/android/entityTableData.list" class="mt20"> < el-table-column label="名称" prop="name" show-overflow-tooltip> < /el-table-column> < el-table-column label="中文名" prop="entityChName" show-overflow-tooltip> < /el-table-column> < div slot="xxxxx"> more content < /div> < /sn-table> < /div> < /template>


    推荐阅读