elementui 表格中嵌套子表格

Posted 2023-05-11

参考技术A <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 '';

                

elementUI的Table 表格问题

参考技术A 在开发vue框架项目时，引入element插件，使用table表格组件时，遇到了一些问题，以下列出以供参考。

如上图，在当前导航表格table样式是没问题的，但当我点击别的导航去到另外的页面，然后再回到之前的导航页面，表格table的样式就会混乱，随便点击当前页面或刷新亦或拉伸页面，样式又恢复正常,很奇怪的样式问题。
打开调试之后，发现table的宽度并没有按照100%来显示，而是根据表格宽度值来计算的（我这里是640px），并且在table标签底下发现了colgroup和col标签，colgroup包裹着对应单元格数的col,并且col的宽度为80px,瞬间恍然大悟，明白640px是怎么得来的，这里一共有8个单元格，8*80就是640px了，那要怎么解决这个默认样式呢？
一、给表格添加固定宽度

二、利用flex的特性

2.table表格数据问题
table显示的数据并不是一成不变的，这里传入table的data需要有实时监控的功能，其中一个数据的改变就要及时显示，这里我用计算属性computed来进行监控。有时候后台返回的状态数据是0,1等等，我们也可以在里面进行判断渲染。

3.table表格的排序、筛选

4.表头添加Tooltip 文字提示

今天的心得就到这儿了，希望可以帮助到有需要的小伙伴儿O(∩_∩)O