zoukankan      html  css  js  c++  java
  • vue3使用render对elementplus的table组件封装

    需求:

    自定义el-table的某些列

    涉及知识点:

    1.父组件传递给子组件render函数,自组件如何渲染出来

    2.vue3中render函数使用第三方UI组件、传递属性、绑定事件

    关于render函数的变更文档:

    https://v3.cn.vuejs.org/guide/migration/render-function-api.html#_2-x-%E8%AF%AD%E6%B3%95-3

    实现:

    父组件:

    {
        title: '操作',
        key: 'operation',
        render: (row:Object) => {
            return h('div', {}, [
                h(btn, {
                  type: 'text',
                  size: 'small',
                  onClick(){
                    getDetail(row)
                  }
                }, '查看'),
                h(btn, {
                  type: 'text',
                  size: 'small',
                  onClick(){
                    getDetail(row)
                  }
                }, '编辑')
            ]);
        } 
      }

     子组件(table组件)

    <Expand :column="item" :row="scope.row" :render="item.render" :index="index" />

     expand.ts

    import { h } from 'vue';
    export default {
        props: {
            row: Object,
            render: Function,
            index: Number,
            column: {
                type: Object,
                default: null
            }
        },
        render: function () {
            return this.render(this.row)
        }
    }
  • 相关阅读:
    虚函数
    class与struct的区别
    HTTP是什么连接
    长连接与短连接
    多线程的主要优点
    overload、override、overwrite的介绍
    常用的Linux命令
    IO模型——IO多路复用机制
    栈区与堆区的区别
    软链接和硬链接到底有啥区别
  • 原文地址:https://www.cnblogs.com/chenwan1218/p/15542962.html
Copyright © 2011-2022 走看看