@sort-change="sortChange"
时间: 2023-07-21 11:37:36 浏览: 122
这是一个Vue.js的指令,用于在指定的元素上绑定一个事件监听器,当元素上的排序改变时执行一个指定的方法sortChange。具体来说,当元素的排序发生变化时,Vue.js框架会自动调用绑定的sortChange方法,并将当前的排序参数作为参数传递给该方法。这样,我们就可以在sortChange方法中对排序进行处理,例如重新渲染列表或者执行其他操作。
相关问题
@sort-change
@sort-change是在Vue.js的Element UI库中的el-table组件上的一个事件监听器。它用于监听表格排序的变化。当表格的排序发生变化时,会触发该事件。这个事件不仅仅监听某一列的排序,而是整个表格的排序。所以,该事件应该写在el-table上,而不是el-table-column上。 当@sort-change事件触发时,可以通过传入的参数column来获取当前排序的列的相关信息,比如排序方式和表头名称。通过判断column.label的值,可以执行相应的逻辑操作。 在示例代码中的sort_change方法中,根据column.order的值来设置排序字段和排序类型,然后调用后台接口处理排序操作。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [关于element table排序 sort-change](https://blog.csdn.net/weixin_43923808/article/details/126352050)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [vue @sort-change 条件排序全部数据而不是当前页](https://blog.csdn.net/lMasterSparkl/article/details/114882635)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
<template> <el-row> <basic-container> <avue-crud :option="option" :table-loading="loading" :data="dataList" :options="tableOptions" :page="page" :search="query" :permission="permissionList" :before-open="beforeOpen" :sortKey="sortKey" :sortOrder="sortOrder" :default-sort = "{prop: 'statusTime', order: 'String'}" @sort-change="handleSortChange" v-model="form" ref="crud" @row-update="rowUpdate" @row-save="rowSave" @row-del="rowDel" @search-change="searchChange" @search-reset="searchReset" @selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad"> <template slot="menuLeft" > <el-button type="primary" size="small" icon="el-icon-delete" plain ref="form" v-model="form" :option="option" @click="handleDelete">删 除 </el-button> </template> export default { data() { return { column: [ { label: "设备组", prop: "groupId", filters:true, search: "true", dicData:[], //清空 // clearable:false, type: 'tree', rules: [{ required: true, message: "请输入设备名", trigger: "blur" }] },] }}} 基于AVUE 框架 在自定义的删除按钮 绑定 设备组的搜索框 的输入值 输入搜索信息 点击删除按钮 获取到当前输入框的值
你可以使用AVUE框架来自定义删除按钮,并将设备组的搜索框的输入值与删除按钮绑定。下面是一个示例代码,展示了如何在点击删除按钮时获取当前搜索框的值:
```html
<template>
<el-row>
<basic-container>
<avue-crud
:option="option"
:table-loading="loading"
:data="dataList"
:options="tableOptions"
:page="page"
:search="query"
:permission="permissionList"
:before-open="beforeOpen"
:sortKey="sortKey"
:sortOrder="sortOrder"
:default-sort="{ prop: 'statusTime', order: 'String' }"
@sort-change="handleSortChange"
v-model="form"
ref="crud"
@row-update="rowUpdate"
@row-save="rowSave"
@row-del="rowDel"
@search-change="searchChange"
@search-reset="searchReset"
@selection-change="selectionChange"
@current-change="currentChange"
@size-change="sizeChange"
@refresh-change="refreshChange"
@on-load="onLoad"
>
<template slot="menuLeft">
<el-button
type="primary"
size="small"
icon="el-icon-delete"
plain
ref="form"
v-model="form"
:option="option"
@click="handleDelete"
>
删除
</el-button>
</template>
</avue-crud>
</basic-container>
</el-row>
</template>
<script>
export default {
data() {
return {
column: [
{
label: "设备组",
prop: "groupId",
filters: true,
search: true,
dicData: [],
//清空
// clearable:false,
type: 'tree',
rules: [
{
required: true,
message: "请输入设备名",
trigger: "blur"
}
]
}
],
form: {}, // 表单数据
query: {}, // 搜索数据
};
},
methods: {
handleDelete() {
// 获取当前搜索框的值
const groupId = this.query.groupId;
console.log(groupId);
// 在这里执行删除操作
},
},
};
</script>
```
在这个示例中,我们在AVue CRUD组件中添加了一个自定义的删除按钮,并将其绑定到`handleDelete`方法。在`handleDelete`方法中,我们可以通过`this.query.groupId`获取当前搜索框的值,并进行相应的操作。请根据实际情况修改代码,并执行适当的删除操作。