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;
}
网友评论