多说无益上 代码:
<template>
<div class="body">
<i-table border :columns="columns2" :data="data3"></i-table>
</div>
</template>
<script>
export default {
data () {
return {
columns2: [
{
title: 'Name',
key: 'name'
},
{
title: 'Age',
key: 'age',
render: (h, params) => {
if (params.row.$isEdit) {
return h('input', {
domProps: {
value: params.row.age
},
on: {
input: function (event) {
params.row.age = event.target.value
}
}
});
} else {
return h('div', params.row.age);
}
}
},
{
title: 'Address',
key: 'address'
},
{
title: 'Action',
key: 'action',
render: (h, params) => {
return h('Button', {
props: {
type: 'text',
size: 'small'
},
on: {
click: () => {
if (params.row.$isEdit) {
this.handleSave(params.row)
} else {
this.handleEdit(params.row)
}
}
}
}, params.row.$isEdit ? '保存' : '编辑')
}
}
],
data3: [
{
name: '哈哈',
age: 18,
address: '上海',
$isEdit: false
},
{
name: '啦啦',
age: 24,
address: '北京',
$isEdit: false
}
]
}
},
methods: {
handleEdit (row) {
this.$set(row, '$isEdit', true)
},
handleSave (row) {
this.$set(row, '$isEdit', false)
}
}
}
</script>
<style>
</style>
在html5页面中,我们知道设置元素样式的方法有2种:一种是直接在元素标签中添加style属性并设置样式,另一种是给元素添加class属性然后给class属性设置样式。既然原生的html页面有这两种设置属性的方式,那么iview的render函数当然也可以这么给元素添加样式啦。
二、render函数添加样式的两种方法:
比如我想设置字体的颜色大小间距,如下图:
第一种方法:直接设置style属性
“操作”列的render函数如下代码:
{
title: '操作',
align: 'center',
render: (h, params) => {
return h('div', [
h('span', {
style:{
fontSize: '14px',
padding: '5px 10px',
cursor: 'pointer',
color: '#fc1'
}
}, '查看'),
]);
}
}