el-table点击重置按钮取消 sortable 的选中
时间: 2024-09-26 10:12:03 浏览: 135
el-table无限滚动+控制列是否显示+列排序(非json)
5星 · 资源好评率100%
在Element UI的el-table组件中,如果你想实现一个点击重置按钮的功能,使得表格的sortable(排序)状态被取消并恢复默认,你可以这样做:
首先,确保你的el-table有sortable属性并且列有sortable设置,例如`{sortable: true}`。然后,可以在你的表单或者按钮区域添加一个点击事件处理器,这个处理器会在用户点击重置按钮时触发。
```html
<template>
<el-button @click="resetSortable">重置排序</el-button>
<el-table :data="tableData" :sortable="sortConfig">
<!-- ... 表格列定义 -->
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [], // 数据数组
sortConfig: { // 初始化的排序配置,如 {prop: 'column', order: 'asc'}
prop: '',
order: ''
}
};
},
methods: {
resetSortable() {
this.sortConfig.prop = '';
this.sortConfig.order = 'asc'; // 或者如果默认为降序,可以设置为'desc'
this.$refs.table.doLayout(); // 更新排序状态,并强制渲染
}
}
};
</script>
```
当用户点击“重置排序”按钮时,`resetSortable`方法会被调用,它会将`sortConfig`中的`prop`和`order`属性设置为空值或默认值,然后通过`$refs.table.doLayout()`强制更新表格的布局,使其恢复到未排序的状态。
阅读全文