elementui 表格中嵌套子表格

<el-table :data="apply_form_table" border :header-cell-style="{background:'#eef1f6',color:'#606266'}"

                :default-expand-all="false" :row-class-name="getRowClass" style="width: 100%">

                <el-table-column type="expand">

                    <template slot-scope="scope">

                        <el-table v-show="scope.row.children.length>0" border

                            :header-cell-style="{background:'#eef1f6',color:'#606266'}" :data="scope.row.children"

                            style="width: 100%">

                            <el-table-column prop="name" label=""></el-table-column>

                            <el-table-column prop="num" label=""></el-table-column>

                            <el-table-column prop="unit" label=""></el-table-column>

                            <el-table-column prop="unit_price" label=""></el-table-column>

                            <el-table-column prop="total_price" label=""></el-table-column>

                        </el-table>

                    </template>

                </el-table-column>

                <el-table-column prop="name" label=""></el-table-column>

                <el-table-column prop="num" label=""></el-table-column>

                <el-table-column prop="unit" label=""></el-table-column>

                <el-table-column prop="unit_price" label=""></el-table-column>

                <el-table-column prop="total_price" label=""></el-table-column>

            </el-table>

         apply_form_table: [{

                    name: '签字笔',

                    num: '2',

                    unit: '2',

                    unit_price: '2',

                    total_price: '2',

                    children: []

                }, {

                    name: '签字笔',

                    num: '2',

                    unit: '2',

                    unit_price: '2',

                    total_price: '2',

                    children: [{

                        name: '签字笔',

                        num: '2',

                        unit: '2',

                        unit_price: '2',

                        total_price: '2',

                    }, {

                        name: '签字笔',

                        num: '2',

                        unit: '2',

                        unit_price: '2',

                        total_price: '2',

                    }]

                }]

        methods: {

            //  判断表格中的子表格是否有数据,有就显示,无就不显示

            getRowClass({

                row,

                rowIndex

            }) {

                if (row.children.length == 0) {

                    return 'row-expand-cover';

                } else {

                    return '';

                }

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。