zoukankan      html  css  js  c++  java
  • vue表格表头添加按钮

    实现以下效果:

     vue-html

            <el-table :data="users" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style=" 100%;">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column type="index" label="序号" width="100">
                </el-table-column>
                <el-table-column prop="p_id" label="项目ID" width="100" v-if="visible">
                </el-table-column>
                </el-table-column>
                <el-table-column prop="p_name" label="项目名称" width="120" >
                </el-table-column>
                <el-table-column prop="p_status" label="状态" width="100" :formatter="formatStatus" >
                </el-table-column>
                <el-table-column prop="p_creator" label="创建人" width="100" >
                </el-table-column>
                <el-table-column prop="create_time" label="创建日期" width="120" :formatter="formatDateDMT" >
                </el-table-column>
                <el-table-column prop="p_desc" label="描述" min-width="180" >
                </el-table-column>
                <el-table-column label="操作" :render-header="renderHeader" width="150">
                    <template scope="scope">
                        <el-button type="warning" size="mini" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)" circle></el-button>
                        <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDel(scope.$index, scope.row)" circle></el-button>
                    </template>
                </el-table-column>
            </el-table>

    下面实现表头增加按扭; 需要自定义渲染表头

                // 表头操作栏按钮
                 renderHeader(h, params) {
                    let a =  [
                        h('el-button-group',[
                            // 文字提示
                            h('el-tooltip',{
                                props: {
                                    disabled: false,
                                    content: "增加测试用例",
                                    placement: "bottom",
                                    effect: "light"
    
                                },
                            },
                            [
                                // 增加按钮
                                h('el-button', {
                                    props: {
                                        size: "mini",
                                        type: "primary",
                                        icon: "el-icon-add-location"
                                    },
                                    on: {
                                        click: () => {
                                            this.renderAddRow();
                                        }
                                    }
                                })
                            ]),
                            
                            h('el-tooltip',{
                                props: {
                                    disabled: false,
                                    content: "全局变量",
                                    placement: "bottom",
                                    effect: "light"                                
                                }
                            },
                            [
                                // 全局变量按钮
                                h('el-button', {
                                    props: {
                                        size: "mini",
                                        type: "primary",
                                        icon: "el-icon-share"
                                    },
                                    on: {
                                        click: () => {
                                            this.renderAddRow();
                                        }
                                    }
                                }),
                            ]),
                            h('el-tooltip',{
                                props: {
                                    disabled: false,
                                    content: "系统函数",
                                    placement: "bottom",
                                    effect: "light"                                
                                }
                            },
                            [
                                // 系统函数按钮
                                h('el-button', {
                                    props: {
                                        size: "mini",
                                        type: "primary",
                                        icon: "el-icon-share"
                                    },
                                    on: {
                                        click: () => {
                                            this.renderAddRow();
                                        }
                                    }
                                }),
                            ]),
                        ])
                    ]
                    return h('div', a);
                },

    这里要解释的是h()这个相当于创建个虚拟的dom,执行时创建。

    h('div', {}, [])可以有三个参数(标签,标签属性定义, 嵌套标签)  可省略

    举例:

    h('el-button-group',{}, [
      h('el-button', {
        type: "primary",
        icon: "el-icon-edit",
      }),
    ])
    <el-button-group> <el-button type="primary" icon="el-icon-edit"></el-button> </el-button-group>

    以上两个结果是相等的。

  • 相关阅读:
    【转载】 TensorFlow函数:tf.Session()和tf.Session().as_default()的区别
    【转载】 TensorFlow学习——tf.GPUOptions和tf.ConfigProto用法解析
    【转载】 tf.ConfigProto和tf.GPUOptions用法总结
    【转载】 tf.cond() ----------------------(tensorflow 条件判断语句 if.......else....... )
    【转载】 os.environ["CUDA_DEVICE_ORDER"] = "PCI_BUS_ID" os.environ["CUDA_VISIBLE_DEVICES"] = "0" (---------tensorflow中设置GPU可见顺序和选取)
    nodejs调试
    cocos2d-js V3.0 V3.1使用DragonBones
    转:Flash 插件面板 DragonBonesDesignPanel 的绿色安装方法
    createjs入门
    cocos2d-js 入门 (主要是HTML5)
  • 原文地址:https://www.cnblogs.com/yhleng/p/13048931.html
Copyright © 2011-2022 走看看