我自横刀向天笑,去留肝胆两昆仑。这篇文章主要讲述饿了么表格二次封装具名插槽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>
推荐阅读
- c# 通过win32 api 得到指定Console application Content
- mybatis generator 根据表生成对应的mapper文件
- appium---封装定位
- 在Android项目中(百度地图),报错(key验证出错)
- AndroidIntent意图 : 基本使用
- typeError: cannot read property '_wrapper' of undefined
- 安卓全屏或沉浸式状态栏下输入框(EditText)被键盘遮挡解决方法
- 英语四六级模拟考试系统APP
- Android项目——用户主页实现