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

1)在封装组件中使用table具名插槽,并自定义具名插槽,对外开发使用:commonTable

<template>
  <div class="common-table-style">
    <el-table
      :data="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="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>

原文地址:https://www.cnblogs.com/zhang134you/p/11792925.html

时间: 2024-11-01 01:49:44

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

vue + element ui table表格二次封装 常用功能

因为在做后台管理项目的时候用到了大量的表格, 且功能大多相同,因此封装了一些常用的功能, 方便多次复用. 组件封装代码: <template> <el-table :data="tableData" size="medium" ref="multipleTable" border fit @sort-change="handleSort" @filter-change="filterHandler&

iOS项目相关@AFN&amp;SDWeb的二次封装

一,AFNetworking跟SDWebImge是功能强大且常用的第三方,然而在实际应用中需要封装用来复用今天就跟大家分享一下AFN&SDWeb的二次封装 1. HttpClient.h及.m .h定义了HTTP常用的四种GET POST PUT DELETE 请求 一般分别用做增删减查 定义前预处理,请求成功处理,请求失败处理的block 及带多参数w的方法声明 .m设置请求类型跟响应类型,监听网络是否有网络,如果没有,弹出网络异常的警示框 2. UIImageView+WebCache.h及

HtmlTestRunner二次封装(TestRunner.py)

将HtmlTestRunner进行二次封装,是报告生成的更方便 import HTMLTestRunner import unittest import time, os class TestRunner(object): def __init__(self, cases="./"): self.case = cases def get_all_cases(self, class_name): return unittest.defaultTestLoader.loadTestsFro

pywinauto二次封装(pywinnat.py)

将pywinauto常用方法进行封装,使得pywinauto用起来更简单 #头文件的引入 from pywinauto import application from pywinauto import clipboard import SendKeys import win32api import win32con import os, sys, time #二次封装的类 class Pywin(object): #======================= # pywin framwork

二次封装dojo slider

上次的二次封装timeslider,挺有意思,又来封装一个dojo的,样式还是用arcgis的.实现更多功能,包括HorizontalSlider和VerticalSlider, 刻度的显示隐藏,标签的显示和隐藏,上刻度和下刻度的显示隐藏,无序数显示刻度,标签图标的自由选择,大小选择....更多功能大家看完code也可以自己慢慢加进去哈~~~ code有点长,先上slider的class::MyCustomSlider.js [javascript] view plain copy /** * 

二次封装arcgis的timeslider

arcgis的timeslider是对dojo slider二次封装,项目需要,所有Map用统一样式的slider,所以写了一个common的dojo class,统一调用生成slider,作为对timeslider再次封装,感觉挺好用. 这个slider不一定要在Map里使用,还可以在其他地方调用.只是要包含arcgis的js包, 先上JavaScript class的code: [javascript] view plain copy /** * yilei create for IES  

毕加索的艺术——Picasso,一个强大的Android图片下载缓存库,OkHttpUtils的使用,二次封装PicassoUtils实现微信精选

毕加索的艺术--Picasso,一个强大的Android图片下载缓存库,OkHttpUtils的使用,二次封装PicassoUtils实现微信精选 官网: http://square.github.io/picasso/ 我们在上篇OkHttp的时候说过这个Picasso,学名毕加索,是Square公司开源的一个Android图形缓存库,而且使用起来也是非常的简单,只要一行代码就轻松搞定了,你会问,为什么不介绍一下Glide?其实Glide我有时间也是会介绍的,刚好上篇我们用到了Picasso,

加密狗复制备份 克隆 破解 OEM信息 二次封装 行业软件破解 批发零售

加密狗复制备份 加密狗模拟   加密狗破解  定制写狗程序 算法注册机 OEM信息 二次封装 汉化  行业软件破解   酒店客房管理  餐饮娱乐 美容美发  会员管理  口腔诊所 口腔医院管理 商超POS 服装鞋帽 家具生产数控 家具设计拆单 排料优化 家居设计销售 药店管理 汽配汽修汽贸4S店管理 财务进销存 OA办公 企业积分制管理 电脑行业管理系统 客户管理...等各行业管理软件批发零售 合作联系QQ:309889372 部分产品列表展示 部分产品分类展示: 服装设计类行业: 主要针对服装

也谈Volley的二次封装

产品中使用Volley框架已有多时,本身已有良好封装的Volley确实给程序开发带来了很多便利与快捷.但随着产品功能的不断增加,服务器接口的不断复杂化,直接使用Volley原生的JSONObjectRequest已经导致Activity或Fragment层中耦合了大量的数据解析代码,同时当多处调用同一接口时,类似的数据解析代码还不可复用,导致大量重复代码的出现,已经让我越发地无法忍受.基于此,最近思考着对Volley原生的JSONObjectRequest(因为产品中目前和服务器交互所有的接口,