|
//基础代码
js里 export default {
data () {
return {
self: this,
columns: [
{
title: '个人信息',
render (h, params) { //表格里显示多条数据
return h('div', [
h('p', '姓名:'+params.row.name),
h('p', '年龄:'+params.row.age)
]);
}
},
{
title: '年龄',
key: 'address' //key值需与data里的字段名一致才会显示
},
{
title:'头像',
align:'center',
render:(h,params)=>{ //展示单张或者多张图片
var list=[]
if(params.row.img != ''){
var arr = params.row.img.join(',')
for(let i = 0; i < arr.length; i++){
var img = h('img',{
attrs:{'src':arr[i]}, //设置src属性
'style':'width:50px;height:50px;cursor:pointer;margin-right:5px',
'on':{
click:function(){
//点击事件
}
}
})
list.push(img)
}
return h('div',list)
}
}
},
{
title: '操作',
key: 'action',
width: 150,
align: 'center',
render: function(h, params) {
var btn = h('Button',{ //一般按钮 点击可实现某些操作
props: {
type:'error',
size: "small"
},
attrs: {
style: "padding:5px 8px;margin:8px 10px;"
},
on:{
click: function(){
//点击事件
}
}
}, '查看');
var btn1 = h('i-switch',{
attrs:{'checked':true},
props:{
value:params.row.value==1 //设置switch的状态
},
on: {
'on-change': (value) => { //触发事件是on-change,
}
}
})
return h('div',[btn,btn1])
}
}
],
data: [
{
name: '王小明',
age: 18,
img: '',
address: '北京市朝阳区芍药居',
value: 1
}
}
},
methods: {
}
}
//下载表格 直接地址拼接上参数
exportData(){
window.location.href=`地址&serach_type=${this.merList.serach_type}`
},
|