【Vue】iview表格自定义列模板
问题描述
点击delete或者view页面没反应，后台报错
vue.min.js:6 TypeError: this.remove is not a function
this.show is not a function
问题出现的环境背景及自己尝试过哪些方法
没办法~
相关代码
// 请把代码文本粘贴到下方（请勿用图片代替代码）
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">
<script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
<script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>
</head>
<body>
<div id="app">
<template>
<i-table border :columns="columns7" :data="data6"></i-table>
</template>
</div>
<script>
var app=new Vue({
el:'#app',
data: {
columns7: [
{
title: 'Name',
key: 'name',
render: (h, params) => {
return h('div', [
h('Icon', {
props: {
type: 'person'
}
}),
h('span', params.row.name)
]);
}
},
{
title: 'Age',
key: 'age'
},
{
title: 'Address',
key: 'address'
},
{
title: 'Action',
key: 'action',
width: 150,
align: 'center',
render: (h, params) => {
return h('div', [
h('Button', {
props: {
type: 'primary',
size: 'small'
},
style: {
marginRight: '5px'
},
on: {
click: () => {
this.show(params.index)
}
}
}, 'View'),
h('Button', {
props: {
type: 'error',
size: 'small'
},
on: {
click: () => {
this.remove(params.index)
}
}
}, 'Delete')
]);
}
}
],
data6: [
{
name: 'John Brown',
age: 18,
address: 'New York No. 1 Lake Park'
},
{
name: 'Jim Green',
age: 24,
address: 'London No. 1 Lake Park'
},
{
name: 'Joe Black',
age: 30,
address: 'Sydney No. 1 Lake Park'
},
{
name: 'Jon Snow',
age: 26,
address: 'Ottawa No. 2 Lake Park'
}
]
},
methods:{
show (index) {
this.$Modal.info({
title: 'User Info',
content: `Name：${this.data6[index].name}<br>Age：${this.data6[index].age}<br>Address：${this.data6[index].address}`
})
},
remove (index) {
this.data6.splice(index, 1);
}
}
})
</script>
</body>
</html>
你期待的结果是什么？实际看到的错误信息又是什么？
到底是哪里有问题啊，求帮助！！！
回答
你的data是个数据对象，在组件中它应该是一个函数，这里你打印this就知道了，this并不是这个组件的的虚拟DOM，虚拟DOM才能调用到remove和show。
以上是 【Vue】iview表格自定义列模板 的全部内容， 来源链接： utcz.com/a/85959.html
