Iview table custom column template

problem description

there is no response when clicking on delete or view page. An error is reported in the background
vue.min.js:6 TypeError: this.remove is not a function
this.show is not a function

the environmental background of the problems and what methods you have tried

No way ~

related codes

/ / Please paste the code text below (do not replace the code with pictures)

< 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:"-sharpapp",
        data: {
            columns7: [
                {
                    title: "Name",
                    key: "name",
                    render: (h, params) => {
                        return h("div", [
                            h("Icon", {
                                props: {
                                    type: "person"
                                }
                            }),
                            h("strong", 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 >

what result do you expect? What is the error message actually seen?

what"s the problem? ask for help!

Aug.30,2021

your data is a data object, and it should be a function in the component. Just print this here, this is not the virtual DOM, virtual DOM of this component to call remove and show.

Menu