render函数内用ajax,vue+iview组件，render函数，table render Input，Tooltip，Select Option，Upload各种标签的render函数举例...

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

2.select option 赋值

//select option 赋值

{{ item.label }}

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;

}