2024-05-25 如果大于0 列表显示蓝色 否则显示黑色,如果大于0有小手,否则没有,如果大于0,有点击事件,否则没有,iview-ui的写法

multiplePackFinishCount: { title: '装箱成功订单数', key: 'multiplePackFinishCount', align: 'center', tooltip: true, resizable: true,
render: (h, params) => {
const { row } = params;
const result = row.multiplePackFinishCount;
const color = result > 0 ? '#159BD5' : '#515a6e'; // 根据条件设置字体颜色

                    // 定义基础样式
                    const baseStyle = {
                        color: color,
                        fontWeight: 'bold', // 设置字体加粗
                        cursor: result > 0 ? 'pointer' : 'default' // 如果result大于0,设置鼠标样式为pointer,否则为default
                    };

                    // 定义事件处理器
                    const eventHandlers = result > 0 ? {
                        click: () => {
                            this.titleShow = '装箱订单明细';
                            this.showEmployeDetail = true;
                            this.id = params.row.id; // id
                            this.eventType = "20920122"; // 类型
                            this.detailList(this.id, this.eventType);
                        }
                    } : {}; // 如果result不大于0,则事件处理器为空对象

                    // 返回渲染的span元素
                    return h('span', {
                        style: baseStyle, // 绑定样式
                        on: eventHandlers // 绑定事件处理器
                    }, result);
                    }, 
                },
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容