标题相关配置

内容标题配置图标

提示

当前暂不支持直接配置内容的标题图标，如果需要显示，可在对应内容模块的【图表配置】或【自定义js】内配置，图表配置的示例代码如下：

{
	"iconAttrs": {
		"name": "todoT"
	}
}

标题右侧插槽

js示例

export default {
    // 以下示例是写在块上的
    title: {
        // // 右侧自定义文本，返回html字符串
        // rightFormat () {
        //     return `<div style="color: red">右侧自定义文本</div>`
        // },
        // // 点击右侧执行的回调（存在rightFormat或rightRender时生效）
        // rightClick () {
        //     // this 指向所在块作用域（PanelBlock.vue 文件）
        //     this.$message.warning('右侧文本被点击')
        //     console.log(this)
        // },
        // 或者使用自定义渲染：优先级 leftFormat > leftRender
        // 可设置多点击事件、使用 src\components\frame\Panel\PanelBlock\BlockTitle.vue 文件内有引用的/全局组件
        // 如需使用自定义组件，需要在此文件内自定义引入
        rightRender () {
            // this 指向所在块作用域
            return (
                <span>
                    <bd-button icon={{name: 'search'}} type="primary" size="mini" nativeOn-click={(e) => {
                        // this 指向所在块作用域（PanelBlock.vue 文件）
                        console.log(this)
                        let searchItem = this.tempInfo.filterList.find(o => o.id === 'text')
                        if (!searchItem) {
                            // 添加或修改搜索传参
                            this.tempInfo.filterList.push({
                                id: 'text',         // 参数的key，必须
                                value: '测试数据',   // 参数的value，必须
                                isHide: true,       // isHide 为true 时不会以搜索框的形式展示
                                // isDynamic: true,    // 是否为动态参数（sql中以<<<fieldName>>>的形式书写），直观的表现为传参放在dynamicValues（true）或searchParams（false）内
                                tagName: '',        // 参数放在searchParams内传值时，会传递给后台，默认空字符串，具体看sql代码需求
                            })
                        } else {
                            searchItem.value = '非第一次点击，防止重复添加'
                        }
                        // this.tempInfo.filterList 有更改的话，需要放在 nextTick 中search，否则数据存在延迟
                        this.$nextTick(() => {
                            // 搜索对应的块
                            this.search({text2: '与searchParams同级的参数'})
                        })
                        // ********** 如果需要单独请求【同块内的某个或几个内容】 *************
                        // this.search({}, [`content_${配置面板时设置的内容编码}`])

                        // ********** 如果需要请求此面板内【其他块】 *************
                        // this.panelScope.search({}, [`block_${配置面板时设置的块编码}`])

                        // ********** 如果需要请求此面板内【其他内容】 *************
                        // this.panelScope.search({}, [`block_${配置面板时设置的块编码}`, `content_${配置面板时设置的内容编码}`])
                        
                        
                        this.$message.warning('点击搜索按钮，加入了text参数，结果看请求')
                        e.stopPropagation() // 阻止事件冒泡，避免表格行被选中
                    }}></bd-button>
                    <bd-button icon="delete" type="danger" size="mini" nativeOn-click={(e) => {
                        this.search()
                        this.$message.warning('点击删除按钮，移除text2参数')
                        e.stopPropagation() // 阻止事件冒泡，避免表格行被选中
                    }}></bd-button>
                </span>
            )
        }
    }
}

标题左侧插槽

仅面板支持左侧插槽自定义渲染

js 示例

export default {
    title: {
        leftFormat () {
            return `<div style="color: red">左侧自定义文本</div>`
        },
        // 点击右侧执行的回调（存在rightFormat或rightRender时生效）
        leftClick () {
            this.$message.warning('左侧文本被点击')
        },
        // 或者使用自定义渲染：优先级 leftFormat > leftRender
        leftRender () {
            return (
                <span>右侧自定义渲染文本</span>
            )
        }
    }
}