iView 中 render 用法总结“
iView中render用法总结
场景
在列表数据当中,当我相对列表中某一个单元格进行操作的时候,我可以可以使用render函数来灵活的改变单元格的样式,或者是显示的文本,亦可以让单元格可以直接编辑
1. 枚举数字转换成中文释义
//前面代码可以省略
export default {
data() {
const _self = this;
return {
statusEums : {
1 : "待执行",
2 : "执行中",
3 : "已完成",
4 : "废除"
},
orderList:[],
colums : [
{
title : "序号",
type : "index",
},
{
title: "状态",
key: "status", //如果接口返回的是中文可以直接显示
width: 80 , //单元格宽度
align: 'center', //样式居中
render: (h ,data) => {
return h ('span' , _self.statusEums[data.row.status]);
//处理之后 返回的是对应的中文意思
}
},
{
title : '完成率',
key : 'prencentage',
render: (h , data) => {
let suffiex = "";
if(data.row.precentage != null) {
suffiex = data.row.precentage + "%";
}
return h ('input' , suffiex)
}
}
]
}
}
}2. 可以操作的输入框
//前面代码可以省略
export default {
data() {
const _self = this;
return {
orderList:[],
colums : [
{
title:"备注(处置情况)",
key:"content",
align:'center',
render: (h, data) => {
return h("div", [
h("Input", {
props: {
value:data.row.content
},
//值变更事件
on: {
input: newValue => {
data.row.content = newValue;
_self.orderList[data.index].content = newValue; //更新当前列的数据
}
}
})
]);
}
},
]
}
}
}3. 下拉选(可编辑的)
export default {
data() {
return {
shippingMap:[], //接口返回的单位数据,用于做下拉选项目
{
title:"运输单位名称",
key:"shippingId",
align:'center',
width:190,
render: (h, data) => {
var _options = _self.shippingMap.map(item =>{
return h("Option", {
props: {
value: item.id,
key: item.id,
label: item.orgName
}
});
})
return h(
"Select",
{
style: {
width: "180px"
},
props: {
filterable: true,
size: "small",
transfer: true,
value:_self.orderList[data.index].shippingId
},
on: {
"on-change": function(v) {
_self.orderList[data.index].shippingId = v;
}
}
},
_options
);
}
},
}
}
}4. 可跳转的的a标签
export default {
data() {
return {
colums: [
//这种是a便签根据url定向跳转,还可以通过点击事件路由跳转
{
title: "文件路径",
render: (h, data) => {
return h('a' , {
style: {
color: red,
textDecoration: 'underline'
},
attrs: {
title: data.row.title,
href: data.row.path,
target : '_blank',
}
} , data.row.title)
}
},
{
title: "点击跳转",
key: 'courseno',
render: (h ,data) => {
return h ('a' , {
style:{
color: blue,
},
on : {
click: function() {
this.$router.push({name: "course-detail" ,params:{ id : data.row.id}})
}
}
}, data.row.courseno)
}
}
]
}
}
}其它的可以根据上面的示例进行举一反三,大体接口相同即可
Donate
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020-11-20，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录