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

I need some advice on how you would approach this problem I am trying to solve.I have a component call

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

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1744060368a4551673.html

相关推荐

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信