element-ui 表格sortable排序手动js清除方式

目录
  • element-ui 表格sortable排序手动js清除
    • 解决方法
  • element-ui 重置清除排序规则及样式

element-ui 表格sortable排序手动js清除

element-ui表格组件自带的排序功能如下，详见 Element表格排序

现在有个需求，是在列表之上增加搜索功能，而搜索之后，数据恢复默认不排序，

即：当前数据按照某个字段排序了，此时去搜索数据搜索出来的结果无需排序，就要讲排序状态清除，

查阅文档，发现element提供了 clearSort 方法

解决方法

html:

<el-table ref="sortTable" :data="tableData">

js:

this.$refs.sortTable.clearSort();

element-ui 重置清除排序规则及样式

     this.$nextTick(() =>{
       this.$refs.tableData.clearSort();
      })

如果使用tab组件，则会生成列表数组，需进行对应索引的列表清除排序

可打印this.refs.tableData，看返回的是书否是一个数组，如果是数组，就用this.refs.tableData0[0].clearSort();

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Elementui表格组件+sortablejs实现行拖拽排序的示例代码

    前言 运营小姐姐说想要可以直接拖拽排序的功能,原来在序号六的广告可能会因为金主爸爸加钱换到序号一的位置,拖拽操作就很方便 效果 实现方式 template部分 <el-table v-loading="loading" :default-sort="{prop: 'sortNum', order: 'ascending'}" :data="list" border align="left" > <el-tab

  • vue+element-ui+sortable.js实现表格拖拽功能

    vue+element-ui+sortable.js实现表格拖拽功能

    本文实例为大家分享了vue+element-ui+sortable.js实现表格拖拽的具体代码,供大家参考,具体内容如下 效果如下: 1.vue使用cli创建项目就不说了,本人使用的是cli3.x版本 2.下载element-ui npm i element-ui -S 3.引入element-ui,找到main.js,加入如下代码 // 导入element-ui,和全局使用element-ui样式 import ElementUI from "element-ui"; import

  • Vue中使用elementui与Sortable.js实现列表拖动排序

    本文实例为大家分享了使用elementui与Sortable.js实现列表拖动排序的具体代码,供大家参考,具体内容如下 一.安装使用Sortable.js 1.安装 cnpm install sortablejs --save 2.在需要的vue页面单独引入 <script>     import Sortable from 'sortablejs'     export default{         .........         data() {             retur

  • element-ui 表格sortable排序手动js清除方式

    目录 element-ui 表格sortable排序手动js清除 解决方法 element-ui 重置清除排序规则及样式 element-ui 表格sortable排序手动js清除 element-ui表格组件自带的排序功能如下,详见 Element表格排序 现在有个需求,是在列表之上增加搜索功能,而搜索之后,数据恢复默认不排序, 即:当前数据按照某个字段排序了,此时去搜索数据搜索出来的结果无需排序,就要讲排序状态清除, 查阅文档,发现element提供了 clearSort 方法 解决方法 h

  • element ui 表格动态列显示空白bug 修复方法

    在使用element ui框架进行项目开发的时候,表格的列是根据后台数据动态生成的,但是发现在列刷新的视乎,会出现表格完全空白,没有显示的情况,经过自己编写demo发现,在增加列的情况下表格正常,但是一旦表格列减少时就会出问题,对element底层代码进行调试发现,在node_modules/element-ui/lib/elementui.common.js 中的一个函数. removeColumn: function removeColumn(states, column) { var _c

  • element ui表格实现下拉筛选功能

    element ui表格实现下拉筛选功能

    本文实例为大家分享了element ui表格实现下拉筛选的具体代码,供大家参考,具体内容如下 1.default-sort中prop传入要排序的字段(接口返回或自己定义的数据).order代表排序,这里用到降序 2.filters对象中text代表页面中显示的筛选文字,value代表筛选用到的值,在方法中filterHandler用到 3.column 的 key,如果需要使用 filter-change 事件,则需要此属性标识是哪个 column 的筛选条件(绑定的是要对接口中排序的字段) 4

  • 关于element ui 表格中的常见特殊属性说明

    关于element ui 表格中的常见特殊属性说明

    目录 1,表格内容太多用…表示 2,修改element ui自带的样式 3,修改奇数行背景色 4,给表头添加背景色及文字样式 5,表头文字竖向排列(文字带括号) 6,表头边框与文本边框对不齐情况 7,导航栏的侧边栏只展开一个下拉菜单 8,表格表头和内容居中显示 9,添加表格背景色 10,鼠标移入表格高亮显示当前行 element ui 表格的常见特殊属性 1,表格内容太多用...表示2,修改element ui自带的样式3,修改奇数行背景色4,给表头添加背景色及文字样式5,表头文字竖向排列(文字

  • 关于element中表格和表单的封装方式

    关于element中表格和表单的封装方式

    目录 pc端基础的表格组件的封装 pc端基础的表单组件的封装 表格的样式 表单的样式 混入的封装 将以上三个文件挂在到main.js中 组件的使用 1·基础案例 2·特殊案例 3·特殊案例3 4·特殊案例 pc端基础的表格组件的封装 list.vue <!--region 封装的分页 table--> <template> <div class="table"> <!-- <el-card shadow="always"

  • element ui table（表格）实现点击一行展开功能

    element ui table（表格）实现点击一行展开功能

    前言 element ui是一个非常不错的vue的UI框架,element对table进行了封装,简化了vue对表格的渲染. element ui表格中有一个功能是展开行,在2.0版本官网例子中,只可以点击右箭头可以展开,我们的很多需求是点击某一行展开 那是不是无法实现呢?其实,借助element ui的一些属性,轻松实现点击某行展开,我们还是用2.0.9版本官网的例子, 对齐改造,使之可以做到这点 <template> <el-table :data="tableData5&

  • Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能

    2017年底了,总结了这一年多来的前端之路,Vue从入门到放弃,再二进宫,从 Vue1.0 持续跟踪到 Vue2.5.结合公司的一些实际项目,也封装了一些比较实用的组件. 由于现在公司管理平台主要运用Element UI,索性就结合组件Table 和 Pagination 封装了一个支持页面切换的Table组件,不啰嗦,直接上代码. 2.实现思路 2.1.Element UI 引入(整体引入) main.js // Element UI import Element from 'element-

  • 使用Element实现表格表头添加搜索图标和功能

    使用Element实现表格表头添加搜索图标和功能

    目录 Element 表格表头添加搜索图标和功能 主要实现 table的slot=‘header’ element ui表格el-tabel给表头加icon图标 设置 Scoped slot 来自定义表头 Element 表格表头添加搜索图标和功能 主要实现 table的slot=‘header’ headerData是表头的循环数组 tableData是表格内容的数组 <template slot="header"></template> 自定义表头的内容 注

  • 详解vue2.0的Element UI的表格table列时间戳格式化

    这两天学习了vue2.0的Element UI的表格table列时间戳格式化,所以,今天添加一点小笔记. 表格属性 <el-table :data="tableData" v-loading.body="loading" border @selection-change="selectionChange" style="width: 100%"> <el-table-column prop="cre

  • element ui里dialog关闭后清除验证条件方法

    关闭dialog触发事件 //vue <!--添加用户dialog begin--> <el-dialog title="编辑用户" :visible.sync="dialogFormVisible" custom-class="editDialog" :close-on-click-modal="false" :before-close = "cleanContent" :show-cl

随机推荐