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.
<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
After conducting an extensive search, I have yet to find a satisfactory answer. My goal is to configure it without including the CUT time. {name: "Registered:", value: `${user.createdAt}`}, {name: "Joined:", value: `${message.guild.joinedAt}`} Presently, ...
Can someone help me figure this out: I currently have this much progress: http://jsbin.com/apikiw/3/edit#preview The issue I'm facing is that I am unable to insert it between the <p /> tags due to its dynamic nature... any solutions or suggest ...
I am working on integrating Google FCM Api for sending Push Notifications. Below is the snippet of code from my JavaScript file: function sendNotificationToUser() { var request={ path :'/fcm/send', method: 'POST&ap ...
I have a piece of HTML code with ng-repeat that includes checkboxes. <table> <tr ng-repeat="address in contactInfo.Addresses"> <td>{{address.DisplayType}}</td> <td>{{address.AddressLine1}}</td> <td>{ ...
Incorporating ReactJs with Material-UI, I am working on displaying a table of Car components where the display does not update after any Create, Edit, or Delete action has been performed. Below is the structure: class MainCar extends React.Component { c ...
My JSON file contains objects structured like this: [ { "name" : "something", "brand": "x", "category" : "cars" }, { "name" : "something2 ...
I am currently working with oracledb npm to request data in JSON format and here is the select block example I am using: const block = 'BEGIN ' + ':response := PK.getData(:param);' + 'END;'; The block is ...
Let me begin by providing some context. I am currently developing a responsive page that uses percentages to position my divs, allowing users to drag and drop items wherever they please. However, a problem arises when the user positions an object too close ...
Is there a way to set qTip to use an attribute other than 'title' as the default? I need to use another attribute because when I disable qtip and add elements dynamically with "title", the title still shows when I hover over the element, which i ...
Currently, I am facing a challenge with my code where I need to loop through a hard-coded data set to determine the distance from a user-entered location using Google's web API. The issue lies in passing an ID variable down through the code so that I ...
I am facing a situation where I have an app component with defined routes and a <router-outlet></router-outlet> set. Additionally, I also have a menu component where I want to set the [routerLink] using the same routes as the app component. How ...
Greetings! Currently, I am in the process of generating a dynamic form within a new tab using JavaScript. For some reason, the margin effects on the div element are not being applied correctly. Despite my attempts to set the margins using both classes and ...
I am facing an issue where I have to click twice on the "Action" button in order to see my dropdown list. How can I resolve this? Is there a way to fix it? $(document).ready(function() { $(".actionButton").click(function() { $dropdown = $("#cont ...
In my form, I am using the checkValidity function to validate inputs. However, I have encountered an issue where the validation only works when an input with the required attribute is missing a value. It doesn't work if there is a value type mismatch, ...
I am working with an array that contains letters from A to H. However, when using a random number generator, I have noticed that the letters A and H are rarely selected. How can I adjust my approach to make sure these two bounds are included more often? ...
Hello everyone, I am currently diving into the world of javascript and trying to expand my knowledge. However, I have encountered a problem that has me stumped, and I could really use some assistance. While exploring, I came across this page: http://www.w ...
In order to enable users to upload images with their posts, I have implemented an upload form alongside every reply form. Users can upload an image by clicking the upload button and then submitting the post. Currently, the upload form works for the first ...
I'm attempting to develop a mobile page transition in vue that mimics the native IOS app page transitions for my hybrid app. To accomplish this, I've created a CSS transition in vue. It works perfectly on my PC and on Mobile Safari, but no tran ...
I am trying to display my functional component in a class-based component, but it is not working as expected. I have created a SimpleTable component which is function-based and displays a table with some values. However, I want to show this table only wh ...
I have a div that needs to be displayed after hovering over another element. These elements are not within the same div. The popup info should appear when an icon with the class .option_36_124 is hovered over. $(".option_36_124").hover(function(){ $(& ...