前端-element-ui应用

最新推荐文章于 2024-09-22 16:58:37 发布

原创最新推荐文章于 2024-09-22 16:58:37 发布 · 244 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #ui #elementui

本文介绍了前端开发中表格操作的常见问题，如批量删除和修改数据的实现。通过`el-table-column`的`type=selection`属性设置多选列，并利用`@selection-change`监听选中项变化，结合`handleSelectionChange`方法获取选中数据。此外，还提到了Element UI的`filterable`和`clearable`属性，以及在树形结构中使用`@row-contextmenu`处理右键菜单功能。文章强调了理解和灵活运用框架提供的功能对于提升前端开发效率的重要性。

1.前端开发一般都是按钮事件，数据回显和收集，主要对框架自带的一些功能能够运用即可

常见问题：1.批量删除，批量修改如何获取选中的数据

<el-table-column type="selection" width="55">

一般我们会选取一列作为供我们选择的数据列，也就是我们常见的表格中第一列类似多选按钮的东西，核心就是type = "selection",那么我们如何获取选中的这些数据呢？el-dialog中含有

@selection-change="handleSelectionChange"这样一个方法，每当有值被选取或取消选取时，我们都可以通过自定义方法来获取选中的数

handleSelectionChange(val) {
            this.ids = val.map(item => item.standardSubUuid);
        },

另外，el还为我们提供了很多方便的方法，比如：

filterable，允许输入框（下拉框）带有检索功能，只需输入相关字符，就会帮你过滤出相关的数据，可以理解为like
clearable，这个是比较常见的，添加之后允许将输入框内的值清空

稍微复杂一点的有：

:tree-props="{children: 'children'}"  （树节点，elment-ui开发文档上有介绍）

还有个开发过程中可能遇到的，属于vue中的，

@row-contextmenu   在做树形结构是可能会有右键新增、详情的情况，采用的就是右键菜单