Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "how Vue dynamically modifies a column of data in el-table". The editor shows you the operation process through an actual case. The method of operation is simple, fast and practical. I hope that this article "how to dynamically modify a column of data in el-table by Vue" can help you solve the problem.

Dynamically modify a column of data in el-table

1. Call the function open@opened= "checked" when the dialog box opens

two。 Editable

3. Synchronize the selected data List:multipleSelection, the function checked: function ()

Set a column of el-table and click the appear input box to edit it.

Set el-table a column click to appear input box can be edited, when the mouse loses the focus of the input box, the input box disappears, showing the corresponding value.

As shown in the following figure:

Specific implementation:

{{scope.row.adSort}}

Set the index for each line through tableRowClassName:

TableRowClassName ({row, rowIndex}) {/ / put the index of each row into row row.index = rowIndex}

Row click event, when a row is clicked, a column of the row sets tabClickIndex:

Due to

VMI if = "scope.row.index = tabClickIndex & & tabClickLabel = = 'order'"

So an input box appears in a column of the current click row:

/ tabClick row current row column current column tabClick (row, column, cell, event) {switch (column.label) {case 'order': this.tabClickIndex = row.index this.tabClickLabel = column.label break default: return} console.log ('tabClick', this.tabClickIndex, row.adName, row.adSort)}

Mouse out of focus event:

/ / lose focus initialization inputBlur (row) {/ / console.log ('row', row) this.tabClickIndex = null this.tabClickLabel =''} that's all for "how Vue dynamically modifies a column of el-table data". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.