饿了么组件表头嵌套

作者: 乖乖果效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>
    

    相关文章

      网友评论

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

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