饿了么组件表头嵌套

作者: 乖乖果效36 | 来源:发表于2017-10-09 18:29 被阅读144次

这是官网关于createElement的简单例子

// @returns {VNode}
createElement(
 // {String(一个 HTML 标签字符串) | Object(组件选项对象) | Function(一个返回值类型为String/Object的函数)}
 // 必要参数
 'div', 
// {Object(包含模板相关属性的数据对象 )} 
// 这样,您可以在 template 中使用这些属性.可选参数.
 { 
  // {String | Array}
  // 子节点 (VNodes),由 `createElement()` 构建而成, 
  // 或简单的使用字符串来生成“文本结点”。可选参数。
  },
 [ '先写一些文字', createElement('h1', '一则头条'), 
createElement(MyComponent, {
   props: { someProp: 'foobar' }
 })
])

从例子中可以看到,createElement方法是可以嵌套的
实际例子中甚至可以实现多层嵌套,特别注意⚠️这里加属性的时候要加载props里面

<template>
 <el-table :data="tableData">
   <el-table-column prop="num" :render-header="renderHeader">
   </el-table-column>
 </el-table>
</template>
<script>
 data() {
   return {
     tableData: [{ num: '50' }] }
   },
 methods: {
/** 加表头提示
* @param {Function} creatElement 函数
* @return {object}  返回的虚拟dom
*/
   renderHeader(createElement, { column }) { 
    return creatElement('div', [
          '可用库存',
          creatElement('el-tooltip', {
            class: 'item',
            props: {
              content: '可用库存=总库存-销售库存',
              placement: 'top',
            },
          }, [
            creatElement('i', {
              class: 'we-icon we-icon--icon-help',
              style: 'color: #666; font-size: 13px;margin-left: 8px;',
            }),
          ]),
        ])
 } }
</script>

相关文章

  • 饿了么组件表头嵌套

    这是官网关于createElement的简单例子 从例子中可以看到,createElement方法是可以嵌套的实际...

  • el-table 组件多级可无限嵌套的递归表头

    前言 结果演示 el-table 组件多级可无限嵌套的递归表头.gif 正文 1. 源码 组件集合(Comple...

  • 饿了么组件table

    element-table A element-table component for Vue.js. Demo ...

  • 基于Vue的Ui框架

    饿了么公司基于vue开的的vue的Ui组件库 Element Ui 基于vue pc端的UI框架饿了么 Mint...

  • 前端UI框架

    1. Vue ElementUI是由饿了么UED设计、饿了么前端团队开发的,基于Vue2.0的桌面端组件库。Vue...

  • Vue - day7

    day7 使用饿了么的 MintUI 组件 Mint-UI官方文档 使用 ElementUI 组件 Element...

  • Runtime 替换全局 MJRefreshHeader

    实现效果 需求 自定义带gif表头,类似饿了么app下拉刷新效果 替换所有原页面中默认的 MJRefreshNor...

  • Vue组件库

    基于Vue的组件库 https://github.com/ElemeFE/element" element 饿了么...

  • Vue的组件库

    基于Vue的组件库 https://github.com/ElemeFE/element" element 饿了么...

  • vue相关库

    基于Vue的组件库https://github.com/ElemeFE/element" element 饿了么出...

网友评论

    本文标题:饿了么组件表头嵌套

    本文链接:https://www.haomeiwen.com/subject/lybpyxtx.html