turn :https://www.jianshu.com/p/e51ba4cb11d6

The first effect

 
design sketch

Three elements

1、row-click Click on the line

2、ref Know for yourself vue

3、toggleRowExpansion

toggleRowExpansion() // Parameters 1 Yes, click on the row row, Parameters 2 yes true perhaps false

Code

<template>
<el-table
:data="tableData5"
@row-click="clickTable"
ref="refTable"
style="width: 100%">
<el-table-column type="expand">
<template slot-scope="props">
<el-form label-position="left" inline class="demo-table-expand">
<el-form-item label=" Name of commodity ">
<span>{{ props.row.name }}</span>
</el-form-item>
<el-form-item label=" The store it belongs to ">
<span>{{ props.row.shop }}</span>
</el-form-item>
<el-form-item label=" goods ID">
<span>{{ props.row.id }}</span>
</el-form-item>
<el-form-item label=" The store ID">
<span>{{ props.row.shopId }}</span>
</el-form-item>
<el-form-item label=" Classification of goods ">
<span>{{ props.row.category }}</span>
</el-form-item>
<el-form-item label=" Shop address ">
<span>{{ props.row.address }}</span>
</el-form-item>
<el-form-item label=" Commodity Description ">
<span>{{ props.row.desc }}</span>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column
label=" goods ID"
prop="id">
</el-table-column>
<el-table-column
label=" Name of commodity "
prop="name">
</el-table-column>
<el-table-column
label=" describe "
prop="desc">
</el-table-column>
</el-table>
</template> <style>
.demo-table-expand {
font-size: 0;
}
.demo-table-expand label {
width: 90px;
color: #99a9bf;
}
.demo-table-expand .el-form-item {
margin-right: 0;
margin-bottom: 0;
width: 50%;
}
</style> <script>
export default {
data() {
return {
tableData5: [{
id: '12987122',
name: ' It's so delicious ',
category: ' Jiangsu and Zhejiang snacks 、 Snacks ',
desc: ' Dutch premium light milk , Milk is fragrant but not greasy ',
address: ' Zhenbei Road, Putuo District, Shanghai ',
shop: ' Wang Xiaohu's husband and wife shop ',
shopId: '10333'
}, {
id: '12987123',
name: ' It's so delicious ',
category: ' Jiangsu and Zhejiang snacks 、 Snacks ',
desc: ' Dutch premium light milk , Milk is fragrant but not greasy ',
address: ' Zhenbei Road, Putuo District, Shanghai ',
shop: ' Wang Xiaohu's husband and wife shop ',
shopId: '10333'
}, {
id: '12987125',
name: ' It's so delicious ',
category: ' Jiangsu and Zhejiang snacks 、 Snacks ',
desc: ' Dutch premium light milk , Milk is fragrant but not greasy ',
address: ' Zhenbei Road, Putuo District, Shanghai ',
shop: ' Wang Xiaohu's husband and wife shop ',
shopId: '10333'
}, {
id: '12987126',
name: ' It's so delicious ',
category: ' Jiangsu and Zhejiang snacks 、 Snacks ',
desc: ' Dutch premium light milk , Milk is fragrant but not greasy ',
address: ' Zhenbei Road, Putuo District, Shanghai ',
shop: ' Wang Xiaohu's husband and wife shop ',
shopId: '10333'
}]
}
},
methods: {
clickTable(row,index,e){
this.$refs.refTable.toggleRowExpansion(row)
}
}
</script>

Realization element-ui in table Click on one line to expand more related articles

  1. Element Ui in table Realize the effect of table editing

    Mainly with css Realization .tb-edit .el-input, .tb-edit .el-input-number, .tb-edit .el-select { display: none; width: ...

  2. About Element UI Page style in small problems

    One , Modify components dialog Window size Two , When I use upload When the component uploads a beautiful picture , Found when previewing the picture , The picture is gray , It's only lit with a click , This effect makes me uncomfortable , So I added the following style , Problem solved ( can ...

  3. Element UI Middle component this.$message Report errors

    Recently, when I was finishing the design , use Element UI Message prompt in message Keep reporting the following errors : The effect of the display is not good , No icons or anything : But I'm clearly there main.js Introduced element-ui ah , Because bisher is in a hurry ...

  4. About Element UI in select Problems encountered in components

    Question 1 : In the use of select After setting the multi selection function of the component , Window jitter problem ? Detailed description : When I use select When doing the multi selection function, there is a problem of window jitter , During the test, I found that , On some people's computers , Some people don't shake on their computers , Looking for a lot of documents , ...

  5. element ui table( form ) Click on a line to expand

    element ui It's a very good one vue Of UI frame ,element Yes table It was packaged , To simplify the vue Rendering of tables . element ui One function of the table is to expand rows , stay 2.0 Version of the official website example , You can only click ...

  6. element ui Medium resetFields() Report errors &#39;resetFields&#39; of undefined

    Do all kinds of things every time form On form , The first thing to notice is initialization , But at first, if you didn't look at the documents carefully , Will write a method to set the data to null , But then there's a problem , There are various validations in the form , If it's a bullet box with form Forms , When the pop-up box appears, execute ...

  7. element ui Some of the tips in

    Recently, I wrote about the company's projects , This project is vue and element ui Built , It's a management platform for power system .  A little trouble , Used to element ui Of all know , Use element ui bounced , Click on the blank space , The default is ...

  8. stay vue About China element UI In the form to achieve the download function , Add button to header , And click event failure solutions .

    Because in element In the form is used el-table The structure is supported by data , therefore , The style of the table is not as flexible as it is written by itself , So there's no way to add buttons . Here's the solution . preparation : One . download npm Install two packages 1. ...

  9. Element ui Use in table Component to realize paging memory

    We'll use vue and element-ui, Or other forms , You may need to be able to remember to turn the page and check , So the realization of the following methods is ok 了 Examples are as follows <el-table :data="tableData&quo ...

Random recommendation

  1. Jmeter relation

      One .Jmeter The way to relate : Jmeter The association can be used on requests that need to get data Right click --> Post Processors Choose the association you want , As shown in the figure below, there are many ways to extract dynamic data : Two . Regular expression extractor : 1. such as ...

  2. LTE Module User Documentation( translate 11)—— Configure user measurement

    LTE User documentation ( If there is something wrong , Welcome to correct !) 17 Configure UE measurements   The user measurement configuration activated in the simulation depends on the selected “consumers”, For example, switching algorithm . Users may need to add ...

  3. git branch

    Use git Management tools ,branch It should be the one we contact most . Whether we are repairing bug, Or do projects , New city branch, Merge after the work is done . But for some beginners , Yes git Little is known about some of the commands of , here , Let's write some common sentences ...

  4. [Bayes] Why we prefer Gaussian Distribution

    Finally, choose a simple and direct name , Here you can experience the convenience and magic of Gauss by hand . Ref: The Matrix Cookbook Be careful , All variables here are multivariate variables by default , Either vector or matrix . The multivariate Gaussian density function is as follows : high ...

  5. Python idle Running code appears &#39;ascii&#39; codec can&#39;t encode characters in position 0-2

    Coding problem , In one way : Python Code , Add at the beginning : import sys reload(sys) sys.setdefaultencoding('utf8') stay idle No error after running in , But it doesn't show ...

  6. javascript Method --bind()

    bind Method , seeing the name of a thing one thinks of its function , It means binding , How to bind it and how to use it , Let's talk about my understanding of this method . grammar fun.bind(this,arg1,arg2,...) bind() Method creates a new function ...

  7. 【JMeter】【 Wechat Haowen collection 】Jmeter Interface test practice - amusing cookie

    scene : Interface testing often requires logging in , Request mode (post),  The common ways to log in are to get token,  obtain session,  obtain cookie,  wait .  All of them have one common characteristic ,  The period of validity (expires). ...

  8. [ The finger of the sword Offer]24- Reverse a linked list

    Topic link https://www.nowcoder.com/practice/75e878df47f24fdc9dc3e400ec6058ca?tpId=13&tqId=11168&t ...

  9. eclipse With MapReduce Running programs in local mode

    1. Prepare the necessary documents winutils.exe.hadoop-eclipse-plugin-2.7.3.jar.hadoop-common-2.2.0-bin-master.zip Download path :http: ...

  10. Reptiles JSON Case study

    Encyclopedia of embarrassing events : Crawling through the Encyclopedia of embarrassing things , What if URL yes  http://www.qiushibaike.com/8hr/page/1 requirement : Use requests Get page information , use XPath / re Count ...