Iview Table UI Cell

Question

Iview Table UI Cell

Is there a way to retrieve the cell data from a library iview table in Vue.js upon clicking? I am looking to capture both the value of the cell and the title of the column, and then modify the CSS of that particular cell. For instance, clicking on one cell would turn it red, while clicking on another cell would turn it green.

javascript vue.js iview

Answer 1

Answer №1

<template>
    <Table border :columns="columns7" :data="data6"></Table>
</template>
<script>
    export default {
        data () {
            return {
                columns7: [
                    {
                        title: 'Name',
                        key: 'name'
                    },
                    /* additional details...*/
                    {
                        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: {//you can attach event handlers here
                                        click: () => {
                                            this.displayInfo(params.index)
                                        }
                                    }
                                }, 'View'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.deleteEntry(params.index)
                                        }
                                    }
                                }, 'Delete')
                            ]);
                        }
                    }
                ],
                data6: [
                    {
                        name: 'John Doe',
                        age: 22,
                        address: 'Paris No. 1 Lake Park'
                    },
                    {
                        name: 'Jane Smith',
                        age: 28,
                        address: 'Berlin No. 1 Lake Park'
                    },
                    {
                        name: 'Jack White',
                        age: 35,
                        address: 'Tokyo No. 1 Lake Park'
                    },
                    {
                        name: 'Jill Brown',
                        age: 31,
                        address: 'Chicago No. 2 Lake Park'
                    }
                ]
            }
        },
        methods: {
            displayInfo (index) {
                this.$Modal.info({
                    title: 'User Details',
                    content: `Name：${this.data6[index].name}<br>Age:${this.data6[index].age}<br>Address：${this.data6[index].address}`
                })
            },
            deleteEntry (index) {
                this.data6.splice(index, 1);
            }
        }
    }
</script>

Columns definition can include a render function for customized display. (You can also link event receivers within the render function). jsfiddle,iview doc,Vue - render functions

Answer 2

<template>
    <Table border :columns="columns7" :data="data6"></Table>
</template>
<script>
    export default {
        data () {
            return {
                columns7: [
                    {
                        title: 'Name',
                        key: 'name'
                    },
                    /* additional details...*/
                    {
                        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: {//you can attach event handlers here
                                        click: () => {
                                            this.displayInfo(params.index)
                                        }
                                    }
                                }, 'View'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.deleteEntry(params.index)
                                        }
                                    }
                                }, 'Delete')
                            ]);
                        }
                    }
                ],
                data6: [
                    {
                        name: 'John Doe',
                        age: 22,
                        address: 'Paris No. 1 Lake Park'
                    },
                    {
                        name: 'Jane Smith',
                        age: 28,
                        address: 'Berlin No. 1 Lake Park'
                    },
                    {
                        name: 'Jack White',
                        age: 35,
                        address: 'Tokyo No. 1 Lake Park'
                    },
                    {
                        name: 'Jill Brown',
                        age: 31,
                        address: 'Chicago No. 2 Lake Park'
                    }
                ]
            }
        },
        methods: {
            displayInfo (index) {
                this.$Modal.info({
                    title: 'User Details',
                    content: `Name：${this.data6[index].name}<br>Age:${this.data6[index].age}<br>Address：${this.data6[index].address}`
                })
            },
            deleteEntry (index) {
                this.data6.splice(index, 1);
            }
        }
    }
</script>

Columns definition can include a render function for customized display. (You can also link event receivers within the render function). jsfiddle,iview doc,Vue - render functions

Iview Table UI Cell

Answer №1

Similar questions

jQuery appears to be unresponsive or inactive

Conceal header and footer bar in Jquery Datatable theme

Manipulating images live with options for scaling, resizing, and cropping

Error encountered: Application module "MyApp" not found

I am experiencing an issue with my React app deployed on Heroku where it successfully loads the home page but fails

What is the best way to test for errors thrown by async functions using chai or chai-as-promised?

Breaking Long Strings into Multiple Lines Using React Material UI Typography

Mask the "null" data in JSON

Is there a more efficient method for coding this switch/case in TypeScript?

Creating reactive Arrays in VueJSIn this guide, we will discuss methods

The utilization of useState can potentially trigger an endless loop

Chronological Overview (Highcharts)

Updating views with AJAX after database updates without the use of jQuery via PHP

How can one break down enum values in typescript?

Transforming a two-column text document into a set of key-value pairs

Utilizing a Custom Validator to Compare Two Values in a Dynamic FormArray in Angular 7

Troubleshooting Vue CLI installation

Managing numerous range sliders in a Django form

Where is the first next() call's argument located?

how to ensure a consistent property value across all scopes in AngularJS