FCAT

Appearance

使用vue2+element开发表单业务时，常常需要列控制的功能，此时方案将选择为JSON/JSX二次封装的element表格。

当表格每一行的按钮需要根据当前所处行的内容来判断是否要禁用按钮时，需要用到render函数的属性判断。

代码如下：

js
export default {
    data() {
        return {
            columnList: [
                {
                    label: '操作',
                    width: '120',
                    align: 'center',
                    render(h, row, column) {
                        return h('div', {}, [
                            h('el-link', {
                                style: {
                                    color: row.isDisabled == "禁用" ? "" : "#0052d9",
                                    'pointer-events': row.isDisabled == "禁用" ? "none" : "",
                                    'margin-right': '10px'
                                },
                                on: {
                                    click: () => {
                                        _this.change(row)
                                    },
                                }
                            }, '编辑'),
                            h('el-link', {
                                on: {
                                    click: () => {
                                        _this.deleteList(row)
                                    },
                                },
                                props: {
                                    type: "danger",
                                },
                            }, '删除')
                        ])
                    }
                }
            ],
        }
    }
}
export default {
    data() {
        return {
            columnList: [
                {
                    label: '操作',
                    width: '120',
                    align: 'center',
                    render(h, row, column) {
                        return h('div', {}, [
                            h('el-link', {
                                style: {
                                    color: row.isDisabled == "禁用" ? "" : "#0052d9",
                                    'pointer-events': row.isDisabled == "禁用" ? "none" : "",
                                    'margin-right': '10px'
                                },
                                on: {
                                    click: () => {
                                        _this.change(row)
                                    },
                                }
                            }, '编辑'),
                            h('el-link', {
                                on: {
                                    click: () => {
                                        _this.deleteList(row)
                                    },
                                },
                                props: {
                                    type: "danger",
                                },
                            }, '删除')
                        ])
                    }
                }
            ],
        }
    }
}

column.property金额格式化 ​

使用金额格式化方法时有可能出错，这里通过column.property进行取数操作

js
export default {
    data() {
        return {
            columnList: [
                {
                    label: '税款',
                    prop: 'sk',
                    width: '160',
                    align: 'right',
                    render(h, row, column, index) {
                        return row.sk_flag == 1 ? (
                            <el-link type="danger" onClick={() => _this.ctmxClick(row, column, index)} >
                                <span>{row[column.property] == null ? '-' : ('￥' + format(row[column.property], 2))}</span>
                            </el-link>
                        ) : (<span>{row[column.property] == null ? '-' : ('￥' + format(row[column.property], 2))}</span>)
                    },
                },
            ],
        }
    }
}
export default {
    data() {
        return {
            columnList: [
                {
                    label: '税款',
                    prop: 'sk',
                    width: '160',
                    align: 'right',
                    render(h, row, column, index) {
                        return row.sk_flag == 1 ? (
                            <el-link type="danger" onClick={() => _this.ctmxClick(row, column, index)} >
                                <span>{row[column.property] == null ? '-' : ('￥' + format(row[column.property], 2))}</span>
                            </el-link>
                        ) : (<span>{row[column.property] == null ? '-' : ('￥' + format(row[column.property], 2))}</span>)
                    },
                },
            ],
        }
    }
}

渲染多个节点代替v-for ​

js
export default {
    data() {
        return {
            columnList: [
                {
                    label: '税款',
                    prop: 'sk',
                    width: '160',
                    align: 'right',
                    render(h, row, column) {
                        let vnodes = []
                        if (row.fjxxs.length == 0) {
                            vnodes.push(<span>-</span>)
                        } else {
                            vnodes.push(
                                <div class={'my-render-box'}>
                                    {row.fjxxs.map((item) => (
                                        <el-button class={'my-render-item'} onClick={() => _this.DownloadFile(item.fjmc, item.fjid)} style="display: block;margin: 0 !important" type="text"> {item.fjmc} </el-button>
                                    ))}
                                </div>
                            )
                        }
                        return vnodes
                    }
                },
            ],
        }
    }
}
export default {
    data() {
        return {
            columnList: [
                {
                    label: '税款',
                    prop: 'sk',
                    width: '160',
                    align: 'right',
                    render(h, row, column) {
                        let vnodes = []
                        if (row.fjxxs.length == 0) {
                            vnodes.push(<span>-</span>)
                        } else {
                            vnodes.push(
                                <div class={'my-render-box'}>
                                    {row.fjxxs.map((item) => (
                                        <el-button class={'my-render-item'} onClick={() => _this.DownloadFile(item.fjmc, item.fjid)} style="display: block;margin: 0 !important" type="text"> {item.fjmc} </el-button>
                                    ))}
                                </div>
                            )
                        }
                        return vnodes
                    }
                },
            ],
        }
    }
}