vue.js - How to collapse rows in a table with VueBootstrap - Stack Overflow

admin管理员组

文章数量:1356258

I need some advice on how you would approach this problem I am trying to solve. I have a component called SortTable. This does what the name suggests. I call that component in another component. Lets call that component B. Its called this like:

<SortTable
                  @clicked="itemClicked"
                  :srcdata="itemlist"
                  :datacolumns="[
                    { key: 'name', name: 'Analyse' },
                    { key: 'code', name: 'Analysetype', dataformat: plantype },
                    { key: 'group', name: 'groups', dataformat: abonnentGruppeNavn },
                    { key: 'id', name: '', link: sletLink, dataformat: (val) => 'delete' },
                  ]"
                />

The functionality is currently that when i click an item on that list that sortTable renders, i emit the data of what is being clicked on and the itemClicked function is called. That sets a state where an editform is shown and loaded with the data of the item being clicked on. That editform is shown on top of the list of items being rendered by the sorttable component. What i want to achieve is that the form is shown directly under the item being clicked on and have the ability to collapse the form and open it by clicking on it. This is the way bootstrap offers collapsing element: .0/components/collapse/ The issue is that when a row is clicked, i cant just href to the form because that lives inside another component. Therefor i can not tell the sorttable what to open and collapse when a row/item on the list is clicked on. How would you go about this problem? Would it be to restructure the architecture somehow? Ideally i would want the solution to be reusable. The same functionality (sorttable and editform) is present many places in my application, so i would want to change it everywhere. Thanks in advance!

I tried to get the position of the row being clicked on in the sorttable component and emitting that to component B and then showing the form dynamically just under the position i emitted. WOuld that be a way to go about it? I still need the collapse functionality in that case

本文标签： vuejsHow to collapse rows in a table with VueBootstrapStack Overflow