vue+iview组件，render函数，table rende

iview 组件用法

iview render 函数

1.table render Input

render: (h, params) => {
    return h('Input',{
        props:{ //属性
            value: params.row.prizeName,
            maxlength: 8,
        },
        on: {
            'on-change':(e) => {
                this.tableData[params.index].prizeName = e.target.value;
            }
        }
    })
}

基础用法，没啥需要注意的，触发函数'on-change'，更改时触发函数。

2.table render InputNumber

//render InputNumber
render:(h,params) => { //params为当前操作行的行数据内容
    return h('InputNumber',{
        style:{
            width:'50px'
        },
        props:{
            value: params.row.sort,
            min: 1, // InputNumber 最小值为1
        },
        on: {
            'on-change':(value) => { // 更改数据时触发函数
                this.tableData[params.index].sort = value;
            }
        }
    })
}

3.table render Select Option

//render Select Option
render: (h, params) => {
    return h('Select', {
        props:{
            value: params.row.prizeType,
            label: params.row.name,
        },
        on: {
            'on-change':(value) => {
                this.tableData[params.index].prizeType = value;
                this.getModeValue(value);
            }
        },
    },
        this.getModeList.map(function(row){
            return h('Option', {
                props: {
                    value: row.prizeType,
                    label: row.name,
                }
            }, row.name);
        })
    );
}

4.table render tooltip

//iview tooltip render
render: (h, params) => {
    return h('div', [
        h('Tooltip', {
            props: { placement: 'right' }
        }, [
            h('span', {
                style: {
                    display: 'inline-block',
                    width: params.column._width*0.85+'px',
                    overflow: 'hidden',
                    textOverflow: 'ellipsis',
                    whiteSpace: 'nowrap',
                },
            }, params.row.remark),
            h('span', {
                slot: 'content',
                style: { whiteSpace: 'normal', wordBreak: 'break-all' }
            }, params.row.remark)
        ])
    ])
}

内容超出表格宽度显示省略号，鼠标滑过显示tooltip。

5.table render upload 上传图片

render: (h, params) => {
    return h('div',[
        h('a',{
            on: {
                click: () => {
                    this.previewImg(params);
                }
            }
        },[
            h('img',{ //显示已上传图片
                attrs:{src:params.row.innerPrizeImg},
                style:{maxWidth:'40px',maxHeight:'30px', verticalAlign:'middle',marginRight: '10px'},
            })
        ]),
        h('Upload', {
            props: {
                type: 'select',
                action: '//127.0.0.1', // localhost 阻止上传
                'before-upload': this.uploadImg, //上传前调用函数
            },
            style: {
                display: 'inline-block',
                marginRight: '10px'
            },
        }, [
            h('Button',{
                props: {
                    type: 'primary',
                    size: 'small',
                },
                on: {
                    click: () => {
                        this.uploadFileChoose = params; // 赋值当前行参数，用于编写业务逻辑时使用
                    }
                }
            },'上传图片'),
        ]),
    ]);
}

uploadImg 上传图片函数

uploadImg(file) {
    let that = this;
    if (file.type.indexOf("image") === "-1") {
        that.$Message.error("文件类型不对！");
    } else if (file.size > 2097152 && file.size <= 0) {
        that.$Message.error("文件大小不能超过2M!");
    } else {
        try {
        let reader = new FileReader();
        reader.readAsDataURL(file)
        reader.onload = e => {
            let imgFile = e.target.result;
            let arr = imgFile.split(',');
            let url = "einsurance/uploadimage.do";
            let params = {
            "base64Str": arr[1],
            "imgUrl": "",
            "suffix": "",
            "ruleType": "_11_11",
            "businessNo": ""
            };
            that.$ajax_post(url, params, data => {
            if (data.ResultCode === "00") {
                that.uploadFileChoose.row.innerPrizeImg = data.data.innerUrl;
                that.uploadFileChoose.row.prizeImg = data.data.outerUrl;
            } else {
                that.$Message.error(data.Result.MSG);
            }
            })
        }
        } catch (error) {
        console.error("文件转码失败：", error)
        that.$Message.error("文件转码失败！");
        }
    }
    return false;
},

6.table render 上传excel表格文件 转成json传给后端

return h('Upload', {
    props: {
        type: 'select',
        action: '//127.0.0.1',
        'before-upload': this.uploadFile,
    },
    style: {
        display: 'inline',
        marginRight: '10px'
    },
}, [
    h('Button',{
        props: {
            type: 'primary',
            size: 'small',
        },
        style: {
            display: 'inline',
        },
        on: {
            click: () => {
                this.uploadXlsChoose = params; // 赋值当前行参数，用于编写业务逻辑时使用
            }
        }
    },'导入文件'),
]),

上传excel方法 uploadFile()

uploadFile(file) {
    var that = this;
    if(file.type.indexOf('excel') == -1){
        that.$Message.error('上传文件类型错误，请重新上传');
        return false;
    }
    this.file = file;
    var wb; //读取完成的数据
    var rABS = false; //是否将文件读取为二进制字符串
    var reader = new FileReader();
    reader.onload = function (e) {
        var data = e.target.result;
        if(rABS){
            wb = XLSX.read(btoa(fixdata(data)), {
                //手动转化
                type: "base64"
            });
        }else{
            wb = XLSX.read(data, {
                type: "binary"
            });
        }
        let prizeInfo = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
        // console.log(prizeInfo); // 表格内容
        let prizeList = [];
        for(var i in prizeInfo){
            let prizeObj = {
                prizeCode: prizeInfo[i].key, //表格内容键值
                prizeNo: prizeInfo[i].key, //表格内容键值
            }
            prizeList.push(prizeObj);
        }
        let url = "einsurance/importprizecode.do"
        let params = { // 业务逻辑需要传输的参数， prizeCodeList为表格内容json
            "activityId": that.uploadXlsChoose.row.activityId,
            "prizeId": that.uploadXlsChoose.row.prizeId,
            "prizeCodeList": prizeList,
        }
        that.$ajax_post(url,params,data => {
            if(data.ResultCode == '00'){
                that.$Message.success({
                    content: `${data.data}`,
                    duration: 5,
                });
                that.reload();
            }
        });
    };
    if (rABS) {
        reader.readAsArrayBuffer(this.file);
    } else {
        reader.readAsBinaryString(this.file);
    }
    return false;
},

1.日期控件双向绑定

//日期控件双向绑定 用 :value
<DatePicker type="datetimerange" @on-change="changeDate" :value="activityTime" format="yyyy-MM-dd HH:mm:ss" placeholder="选择活动时间" style="width:100%"></DatePicker>

2.select option 赋值

//select option 赋值
<Select v-model="typeSelect" placeholder="请选择活动类型">
    <Option v-for="item in activityTypeList" :key="item.value" :value="item.value">{{ item.label }}</Option>
</Select>
activityTypeList: [ //活动类型 select
    {
        value: '1',
        label: '月抽越旺',
    },
],
//当 Select 的 typeSelect = this.activityTypeList[0].value 时，默认选中该值
this.typeSelect = this.activityTypeList[0].value;

3.table 过滤状态值

//iview 过滤状态值写法
render: (h,params) => {
    let statusDes = '';
    if(params.row.status == 0){
        statusDes = '待上架'
    }else if(params.row.status == 1){
        statusDes = '已上架'
    }else if(params.row.status == 2){
        statusDes = '已下架'
    }
    return h('span',statusDes);
},
filters: [
    {
        label: '已上架',
        value: 1
    },
    {
        label: '待上架',
        value: 0
    },
    {
        label: '已下架',
        value: 2
    }
],
filterMultiple: false,
filterMethod (value, row) {
    return row.status.toString().indexOf(value) > -1;
}