Vue Click to expand tr Hidden content?

Let"s take an effect picture first, and the code is posted at the back. Vue is not very familiar with it yet. I hope God will give me a thought or direction ~
clipboard.png
Jqtrtdtrtrtrtd

clipboard.png

. 
<tbody>
              <tr class="hap_table_tr" v-for="(item,index) in hank">
                <td class="hap_table_bank">
                  
{{ item.name }}

                </td>
                <td>
                  
{{ item.process }}

                </td>
                <td>
                  <time>{{ item.date }}</time>
                </td>
                <td class="hap_table_notes" @click="changeContent(index)">
                  <p class="hap_table_note">{{ item.remakes }}

                  <i class="hap_table_drop1"></i>
                </td>
              </tr>
            </tbody>
hank:[
              {name:"",process:"",date:"208-05-23",remakes:"9"},
              {name:"",process:"",date:"208-05-23",remakes:""},
              {name:"",process:"",date:"208-05-23",remakes:""},
              {name:"",process:"",date:"208-05-23",remakes:""},
              {name:"",process:"",date:"208-05-23",remakes:""},
              {name:"",process:"",date:"208-05-23",remakes:""},
              {name:"",process:"",date:"208-05-23",remakes:""},
              {name:"",process:"",date:"208-05-23",remakes:""},
              {name:"",process:"",date:"208-05-23",remakes:""},
              {name:"",process:"",date:"208-05-23",remakes:""},
              {name:"",process:"",date:"208-05-23",remakes:""},
              {name:"",process:"",date:"208-05-23",remakes:""},
            ],
Vue.js
Mar.29,2021

you can use the table component of elementui! elementui

expand the line type= "expand"
refer to Link description
this is to set the button on the right. If your remakes does not have data, it will not display this. If you have data, it will display
this is my project

.

this is not difficult to achieve. Just package two lines of tr as a component, and write the hidden logic to the component. It may be important to note, however, that there are restrictions on what tags are included in table tags, but this is not a problem if you use Vue templates.

Previous: On the problems of Unsafe.park () and Thread.interrupt ()

Next: What is the order in which jobs (micro-tasks) is executed in an event loop of js?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu