How ElementUI table tags so that a line expanded by default

<template lang="html">
    <el-table
        :data="tableData5"
        :row-key="getRowKeys"
        :expand-row-keys="expands"
        style="width: 100%">
        <el-table-column type="expand">
            <template scope="props">
                <el-form label-position="left" inline class="demo-table-expand">
                    <el-form-item label="商品名称">
                        <span>{{ props.row.name }}</span>
                    </el-form-item>
                    <el-form-item label="所属店铺">
                        <span>{{ props.row.shop }}</span>
                    </el-form-item>
                    <el-form-item label="商品 ID">
                        <span>{{ props.row.id }}</span>
                    </el-form-item>
                    <el-form-item label="店铺 ID">
                        <span>{{ props.row.shopId }}</span>
                    </el-form-item>
                    <el-form-item label="商品分类">
                        <span>{{ props.row.category }}</span>
                    </el-form-item>
                    <el-form-item label="店铺地址">
                        <span>{{ props.row.address }}</span>
                    </el-form-item>
                    <el-form-item label="商品描述">
                        <span>{{ props.row.desc }}</span>
                    </el-form-item>
                </el-form>
            </template>
        </el-table-column>
        <el-table-column
            label="商品 ID"
            prop="id">
        </el-table-column>
        <el-table-column
            label="商品名称"
            prop="name">
        </el-table-column>
        <el-table-column
            label=""Description
            prop = " desc" > 
        </ EL-Table-column> 
    </ EL-Table> 
</ Template> 

<Script> 
Export default { 
    Data () { 
        return { 
            tableData5: [{ 
                ID: ' 12,987,122 ' , 
                name: ' Good Zi good taste eggs Aberdeen ' , 
                category: ' Jiangsu and Zhejiang snacks, tapas snacks ' , 
                desc: ' Netherlands evaporated milk quality, milk fragrant but not greasy ' , 
                address: ' Shanghai Putuo District true North' , 
                Shop: ' Xiaohu mom and pop ' , 
                shopId: ' 10333 ' 
            }, { 
                the above mentioned id: ' 12,987,123 ' , 
                name: ' Good Zi good taste Egg ' , 
                category: ' Jiangsu and Zhejiang snacks, tapas snacks ' , 
                desc: ' Dutch high-quality light milk, milk fragrant but not greasy ' , 
                address: ' Shanghai Putuo District true North ' , 
                Shop: ' Xiaohu mom and pop ' , 
                shopId: ' 10333 '
            }, { 
                The above mentioned id: ' 12,987,125 ' , 
                name: ' Good Egg mayonnaise good taste ' , 
                category: ' Jiangsu and Zhejiang snacks, tapas snacks ' , 
                desc: ' Netherlands evaporated milk quality, milk fragrant but not greasy ' , 
                address: ' Shanghai Putuo District true North ' , 
                Shop: ' Xiaohu mom and pop ' , 
                shopId: ' 10333 ' 
            }, {
                the above mentioned id: ' 12,987,126 ' , 
                name: ' Good Egg mayonnaise good taste ' , 
                category: ' Jiangsu and Zhejiang snacks, tapas snacks ' , 
                desc: ' Netherlands evaporated milk quality, milk fragrant but not greasy ' , 
                address: ' Shanghai Putuo District true North ' , 
                Shop: ' Xiaohu mom and pop ' , 
                shopId: ' 10333 ' 
            }], 
            // Get row key value 
            getRowKeys (row) {
                 return row.id; 
            }, 
            // to expand the line, the value of the element row key value 
            Expands: [] 
        } 
    },
    Mounted () { 
        // Here you want to expand the initialization of the row which may be the 
        the this .expands.push ( the this .tableData5 [ . 1 ] .id); 
    } 
}
 </ Script> 

<style lang = " CSS " > 
. Demo -table- the expand { 
   font -size: 0 ; 
} 
.demo -table- the expand label { 
    width: 90px; 
    Color: # 99a9bf; 
} 
.demo -table-.el the expand-form-  Item {
    margin -right: 0 ; 
    margin - bottom: 0 ; 
    width:50%;
}
</style>

 

Guess you like

Origin www.cnblogs.com/ygunoil/p/12619769.html