【Vue】使用iview的表格，使用render插入button按钮昵？

Z时代
2024-01-10
分类：技术分享

使用iview的table，我想在操作那一列插入三个button，然后他显示出来这样的：

尝试了网上的方法不得行，我是直接用的iview的模板，没有理解这一段话
“*render 函数传入三个参数 row、column 和 index，分别指当前单元格数据，当前列数据，当前是第几行。
render 函数本质返回的是字符串，Table 组件在内部对其进行了编译，如果使用了自定义组件，需要特别注意上下文，编译后的自定义组件，默认的上下文是 Table 所在的上下文，如果想让组件在指定的实例下编译，可以给 Table 设置属性 context 来指定上下文，比如本例指定当前路由页为上下文。一般情况不需要此配置，但如果你把 Table 作为一个 slot 封装在其它组件里，这时 context 属性就很有用，比如父级是 $parent，根组件 $root。*”

相关代码

这个是定义的一个组件，我在父组件调用他，是不是与那个context有关

<template>
<Table
:border="showBorder"
:stripe="showStripe"
:show-header="showHeader"
:height="fixedHeader ? 250 : ''"
:size="tableSize"
:data="subtabledata"
:columns="tableColumns3"
:highlight-row="true"
:context="$root"
>
</Table>
</template>
<script>
export default {
name:"caneditTable",
props:{
tabledata:{
type:Array,
}
},
data () {
return {
subtabledata:JSON.parse(JSON.stringify(this.tabledata)),
showBorder: true,
showStripe: true,
showHeader: true,
showIndex: false,
showCheckbox: true,
fixedHeader: false,
tableSize: 'small',
}
},
computed: {
tableColumns3 () {
let columns = [];
if (this.showCheckbox) {
columns.push({
type: 'selection',
width: 60,
align: 'center'
})
}
if (this.showIndex) {
columns.push({
type: 'index',
width: 60,
align: 'center'
})
}
columns.push({
title: '新闻标题',
key: 'title',
align: 'center'
});
columns.push({
title: '标题图片',
key: 'pictitle',
width: 164,
align: 'center'
});
columns.push({
title: '发布人',
key: 'name',
width: 164,
align: 'center'
});
columns.push({
title: '发布时间',
key: 'time',
width: 264,
align: 'center'
});
columns.push({
title: '标注',
key: 'time',
width: 64,
align: 'center'
});
columns.push({
title: '操作',
key: 'time',
width: 146,
align: 'center',
render (row, column, index) {
return '<Button  type="primary" size="small" @click="show(${index})">查看</> <Button  type="error" size="small" @click="remove(${index})">删除</>';
}
});
return columns;
}
},
methods: {
show (index) {
this.$Modal.info({
title: '用户信息',
content: `姓名：${this.data6[index].name}<br>年龄：${this.data6[index].age}<br>地址：${this.data6[index].address}`
})
},
remove (index) {
this.data6.splice(index, 1);
}
}
}
</script>