How to embed check boxes and checkboxes in Element tables
This article mainly explains how to embed check boxes and checkboxes in Element tables. Interested friends may wish to have a look at them. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to embed check boxes and checkboxes in Element tables.
1the effect of embedding CheckBox in the table of Personality element is as follows:
2. The result of single selection by combining checkBox with Magi element is as follows:
Html Code:
one
two
three
four
five
six
seven
eight
nine
ten
eleven
twelve
thirteen
fourteen
fifteen
sixteen
seventeen
eighteen
nineteen
twenty
twenty-one
twenty-two
twenty-three
twenty-four
twenty-five
twenty-six
twenty-seven
twenty-eight
twenty-nine
thirty
thirty-one
thirty-two
thirty-three
thirty-four
thirty-five
ShopInfo
/ / Radio method to return the selected table row
/ / add a multi-box to control whether it is selected or not
{{scope.row.date}}
Js Code:
one
two
three
four
five
six
seven
eight
nine
ten
eleven
twelve
thirteen
fourteen
fifteen
sixteen
seventeen
eighteen
nineteen
twenty
twenty-one
twenty-two
twenty-three
twenty-four
twenty-five
twenty-six
twenty-seven
twenty-eight
twenty-nine
thirty
thirty-one
thirty-two
thirty-three
thirty-four
thirty-five
thirty-six
thirty-seven
thirty-eight
thirty-nine
forty
forty-one
forty-two
forty-three
forty-four
forty-five
forty-six
forty-seven
forty-eight
forty-nine
fifty
fifty-one
fifty-two
fifty-three
fifty-four
Export default {
Name: 'shopInfo'
Data () {
Return {
TableData3: []
}
}
Created () {
This.setTable ()
}
Methods: {
SetTable () {
Let resdata = [{
Id: 44
Date: '2016-05-03'
Name: Wang Xiaohu
Address: '1518 Lane, Jinshajiang Road, Putuo District, Shanghai'
}, {
Id: 89
Date: '2016-05-02'
Name: Wang Xiaohu
Address: '1518 Lane, Jinshajiang Road, Putuo District, Shanghai'
}, {
Id: 23
Date: '2016-05-04'
Name: Wang Xiaohu
Address: '1518 Lane, Jinshajiang Road, Putuo District, Shanghai'
}, {
Id: 88
Date: '2016-05-07'
Name: Wang Xiaohu
Address: '1518 Lane, Jinshajiang Road, Putuo District, Shanghai'
}]
/ / after the background data is returned, manually add a checked attribute to control whether it is selected or not
Resdata.forEach (item = > {
Item.checked = false
})
This.tableData3 = resdata
}
HandleSelectionChange (row) {
This.tableData3.forEach (item = > {
/ / exclusive, clearing all other options each time you select
If (item.id! = = row.id) {
Item.checked = false
}
})
Console.log (row)
}
}
}
At this point, I believe you have a deeper understanding of "how to embed check boxes and checkboxes in Element tables". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!
