[vue2]插槽的jsx写法

应用场景：ant design中的常用的slot写法

            <Table
                rowKey="id"
                dataSource={dataSource}
                columns={colums}
                loading={tableLoading}
                rowSelection={{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }}
                pagination={{
                    current: pageNo,
                        pageSize,
                        pageSizeOptions: ['10', '20', '30'],
                            showTotal: (nums, range) => {
                                return range[0] + '-' + range[1] + ' 共' + nums + '条';
                            },
                                showQuickJumper: true,
                                    showSizeChanger: true,
                                        total
                }}
                bordered
                onChange={({ current, pageSize }) => this.query(current, pageSize)}
                scroll={{ y: 500 }}
                scopedSlots={{
                    original: (text, record) => {
                        return (
                            <EditableCell
                                text={text}
                                onChange={val => {
                                    this.onCellChange(record, 'original', val);
                                }}
                                />
                        );
                    },
                        translation: (text, record) => {
                            return (
                                <EditableCell
                                    text={text}
                                    onChange={val => this.onCellChange(record, 'translation', val)}
                                    />
                            );
                        }
                }}
                ></Table>
         

关键代码

 scopedSlots={{
                    original: (text, record) => {
                        return (
                            <EditableCell
                                text={text}
                                onChange={val => {
                                    this.onCellChange(record, 'original', val);
                                }}
                                />
                        );
                    },
                        translation: (text, record) => {
                            return (
                                <EditableCell
                                    text={text}
                                    onChange={val => this.onCellChange(record, 'translation', val)}
                                    />
                            );
                        }
                }}

另外一种更好的写法：

column配置 + customRender + h函数

export function getColumns() {
    return [
        {
            title: '序号',
            dataIndex: 'sequence',
            key: 'rowIndex',
            width: '4%',
            align: 'center'
        },
        {
            title: '起止日期',
            dataIndex: 'assignmentTime',
            align: 'center',
            width: 200,
            customRender: (val, record) => {
                const assignmentTime = record.assignmentTime ? moment(record.assignmentTime).format(dateFormat) : '';
                const deadline = record.deadline ? moment(record.deadline).format(dateFormat) : '';
                const vDom1 = h('p', {
                    attrs: {},
                    domProps: {
                        innerHTML: assignmentTime
                    }
                    // on: { click: e => handleOp('edit', record, index) }
                });

                const vDom2 = h('p', {
                    attrs: {},
                    domProps: {
                        innerHTML: deadline
                    }
                    // on: { click: e => handleOp('edit', record, index) }
                });
                return h('div', null, [vDom1, vDom2]);
            }
        },

        {
            title: '任务进度',
            dataIndex: 'schedule',
            align: 'center',
            width: 200,

            customRender: (value, record, index) => {
                const percent = value ? +value : 0;
                const props = {
                    percent,
                    strokeLinecap: 'square',
                    strokeColor: {
                        '0%': '#FF4D4F',
                        '100%': '#FF4D4F'
                    }
                };
                return h(Progress, {
                    attrs: {},
                    props: {
                        //这里就是用来给子组件传值的
                        ...props
                    },
                    domProps: {
                        //这个其实就是子组件的dom属性
                    }
                    // on: { click: e => handleOp('edit', record, index) }
                });
            }
        },


    ];
}