2>数据处理：数组拼接字符串等
render: (h, params) => {
let str = ‘’
for (let i = 0, len = params.row.arr.length; i < len; i++) {
str += ${params.row.arr[i].name}-${params.row.arr[i].age} |
}
return h(‘span’, str);
}
3>多情况判断
render: (h, params) => {
if (params.row.age > 18) {
return h(‘span’, ‘未成年’);
}else {
return h(‘span’, ‘成年’);
}
}
render: (h, params) => {
switch (params.row.num) {
case 1:
return h(‘span’, ‘你’);
break;
case 2:
return h(‘span’, ‘好’);
break;
case 3:
return h(‘span’, ‘啊’);
break;
}
}
4>点击事件
render: (h, params) => {
return h(‘span’, {
on: {
click: () => {
// 这里通常做路由跳转，弹窗显示，发送请求等
}
}
}, ‘点击’);
}
5>样式处理：文本溢出以省略号显示
render: (h, params) => {
return h(‘span’, {
style: {
display: ‘inline-block’,
width: params.column._width*0.9+‘px’,
overflow: ‘hidden’,
textOverflow: ‘ellipsis’,
whiteSpace: ‘nowrap’,
}
}, params.row.name);
}
6>悬浮以气泡显示内容
render: (h, params) => {
return h(‘div’, [
h(‘Tooltip’, {
props: {
placement: ‘top’,
}
}, [
params.row.content, // 表格显示文字
h(‘div’, {
slot: ‘content’,
style: {
whiteSpace: ‘normal’
}
}, params.row.content // 气泡内的文字
)
])
]);
}
render: (h, params) => {
return h(‘div’, [
h(‘Tooltip’, {
props: {
placement: ‘top’,
}
}, [
h(‘div’,[
h(‘span’, params.row.content),
h(‘img’, {
attrs: {
// 图片需放在static文件夹下
src: ‘…/…/…/static/img/calibration-tip.svg’
},
style: {
marginBottom: ‘3px’
}
})
]), // 表格列显示文字和图片
h(‘div’, {
slot: ‘content’,
style: {
whiteSpace: ‘normal’
}
}, params.row.content // 气泡内的文字
)
])
]);
}
7>显示图片
render: (h, params) => {
return h(‘div’, [
h(‘img’, {
domProps: {
‘src’: params.row.img
},
style: {
display: ‘block’,
width: ‘30px’,
height: ‘30px’,
borderRadius: ‘3px’,
// margin: ‘0 auto’
},
})
])
}
bug
注意：尽量不要在render和return之间做赋值操作，赋值操作及数据改变（i++）会触发iView的render的刷新机制，会不断刷新直到报错。
如果有点击事件，将这些操作都放在事件中进行处理。
一、特定样式
给某行，某列添加不同的背景色
行
通过属性 row-class-name 可以绑定一个方法，参数为row和index，row会返回每一行的数据，可以通过判断每行的某个属性是否为自己想要的值来为这一行添加一个类名，再通过这个类名来添加样式。index会返回每行的索引，添加样式同理。
.ivu-table .demo-table-row td{
background-color: #2db7f5;
color: #fff;
}
data () {
return {
columnsRow: [
{
title: ‘Name’,
key: ‘name’
},
{
title: ‘Age’,
key: ‘age’
}
],
dataRow: [
{
name: ‘lee’,
age: 18
},
{
name: ‘hello’,
age: 21
}
],
}
},
methods:{
rowClassName (row, index) {
if (index === 1) {
return ‘demo-table-row’;
}
if (row.age === 18) {
return ‘demo-table-row’;
}
return ‘’;
}
}
列
通过给列 columns 设置字段 className 可以给某一列指定一个样式。
.ivu-table td.demo-table-column{
background-color: #2db7f5;
color: #fff;
}
data () {
return {
columnsCol: [
{
title: ‘Name’,
key: ‘name’
},
{
title: ‘Age’,
key: ‘age’,
className: ‘demo-table-column’
}
],
dataCol: [
{
name: ‘lee’,
age: 18
},
{
name: ‘hello’,
age: 21
}
],
}
},
二、滚动条
纵向滚动条
横向滚动条
当所有列的宽度超出table父元素或本身定义的宽度时出现
columns: [
{
title: ‘Name’,
key: ‘name’,
width: 400,
},
{
title: ‘Age’,
key: ‘age’,
minWidth: 500
}
],
三、固定列
columns: [
{
title: ‘Name’,
key: ‘name’,
width: 100,
fixed: ‘left’
},
{
title: ‘Age’,
key: ‘age’,
width: 100,
fixed: ‘right’,
}
],
四、多选
@on-selection-change，只要选中项发生变化时就会触发，返回值为 selection，已选项。
columns: [
{
type: ‘selection’,
width: 60,
align: ‘center’
},
{
title: ‘Name’,
key: ‘name’,
},
{
title: ‘Age’,
key: ‘age’,
}
],
methods:{
getSelection (selection) {
// 通过返回的已选择数组的长度来进行一些判断
// 处理已选择数组，将已选项中的某些值拼接成字符串，发送给后台
}
}
五、单选
methods:{
selectSingleArticle (currentRow, oldCurrentRow) {
// 当前行的数据和上一次选择的数据
}
}
设置默认值
// 后台返回的标志为true， 则为默认值，设置选项的_highlight 为true即为默认值
res.data.forEach((item, index) => {
if (item.flag === ‘true’) {
item._highlight = true
}
})
this.list = res.data || []
六、将多选变为单选
tableData：表格数据
选择
{
title: ‘选中’,
align:‘center’,
key: ‘checkBox’,
render:(h,params)=>{
return h(‘div’,[
h(‘Checkbox’,{
props:{
value:params.row.checkBox
},
on:{
‘on-change’:(e)=>{
this.tableData.forEach((items)=>{ //先取消所有对象的勾选，checkBox设置为false
this.$set(items,‘checkBox’,false)
});
this.tableData[params.index].checkBox = e; //再将勾选的对象的checkBox设置为true
}
}
})
])
}
},
获取
let id = this.tableData.filter( (item) => {
return item.checkBox === true
})[0].id
回显
最后
ue即为默认值
res.data.forEach((item, index) => {
if (item.flag === ‘true’) {
item._highlight = true
}
})
this.list = res.data || []
六、将多选变为单选
tableData：表格数据
选择
{
title: ‘选中’,
align:‘center’,
key: ‘checkBox’,
render:(h,params)=>{
return h(‘div’,[
h(‘Checkbox’,{
props:{
value:params.row.checkBox
},
on:{
‘on-change’:(e)=>{
this.tableData.forEach((items)=>{ //先取消所有对象的勾选，checkBox设置为false
this.$set(items,‘checkBox’,false)
});
this.tableData[params.index].checkBox = e; //再将勾选的对象的checkBox设置为true
}
}
})
])
}
},
获取
let id = this.tableData.filter( (item) => {
return item.checkBox === true
})[0].id
回显
484
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
