elementui 表格（elementui表格怎么放函数）

本文目录

• elementui表格怎么放函数
• elementui 表格中嵌套子表格
• elementUI表格数据复选框回显
• elementui表格中多子节点,怎么删除当前选中的数据

elementui表格怎么放函数

1、首先打开elementui软件，打开新建表格。
2、其次点击函数，手动添加手动添加一个el-table-column，设type属性为selection。
3、最后点击完成添加即可。

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 ’’;

                }

elementUI表格数据复选框回显

elementUI中的表格增加复选功能并进行数据回显

第一步：我先把elementui中的表格格式展示出来
要注意el-table标签里面的@selection-change="handleSelectionChange"这个方法,下面会用到的。还有ref属性，在下面都会用到。还有这里的type，是elementui自带的，自己去看文档。

第二步：就是要写逻辑，拿数据了。

众所周知Vue中的数据绑定在data中,方法挂载在methods中,

如图：
这里的方法就是上面在table里面绑定的一个@selection-change="handleSelectionChange"，就是通过这个方法，点击复选框，进行传参val来获取到每行的数据，记录每行，在循环遍历val，拿到的当前行的id，放到声明数组中arr。

第三步：这里就要循环遍历，拿到数据的总数组和选中的数组了，双循环，将两个数组中的id进行判断，比较。

如图：

第四步：提交页面选中数据。

如图：

这样就完成了。

最后，致所有前端开发，共勉。

elementui表格中多子节点,怎么删除当前选中的数据

elementui表格中多子节点，删除当前选中的数据的操作步骤如下：
1、找到希望删除的子节点所在的行：例如，在表格中选择多个子节点，然后在表格中自动勾选了多个复选框。找到用户想删除的子节点所在的行。
2、在这个行的操作列中找到删除按钮：ElementUI的表格通常有一个操作列（也称为Action列），包含一系列按钮，其中包括、删除、查看等操作。
3、点击这个行的删除按钮：这将删除整个子节点行，并将其从表格中删除。
4、更新数据：如果用户想在表格中更新数据，可以通过其他方式进行操作，例如添加、或更新数据等。