First, let's look at the returned data of tabledata, which only contains the individual column names and the data of each row (rows). At this time, we need to sort the data of each column, but we can only operate the data of each row of rows. This point To clarify, you don’t need to filter out the column data, and directly operate on the row data
Two situations need to be considered, the initial tabledata is sorted and the filterdata is sorted after the tabledata is filtered. In
simple terms, it is a filter and a filter
- Positive sequence AZ
- Inverted ZA
this.rows represents the row data that needs to be filtered (it can be obtained during initialization)
@change="change" is used to obtain the value when the el-select
changes
<!-- 排序气泡框 -->
<el-popover placement="bottom" title="设置排序条件" width="380" trigger="click">
<el-select v-model="groupList.value1" placeholder="请选择" size="small" @change="change">
<el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
<el-button-group style="margin-left: 10px">
<el-button type="primary" size="small" @click="upOrder">升序</el-button>
<el-button type="primary" size="small" @click="downOrder">降序</el-button>
</el-button-group>
<el-button type="text" icon="el-icon-delete" style="font-size: 16px; margin-left: 10px"
@click="deleteOption"></el-button>
<el-button type="text" :underline="false" slot="reference">排序</el-button>
</el-popover>
//定义
name：'',//用于装el-select 选择后的e
rows: [],//用于装行数据
filterData：[]//筛选后的数据
//方法
change(e) {
this.name = e;
},
//取消排序恢复原样
deleteOption() {
//把最初的tabledata赋值给originalValue
this.tableData = this.originalValue
},
// 升序
upOrder() {
if (!this.filterData) {
this.tableData = [];
this.rows.sort((a, b) =>
a.values[this.name] > b.values[this.name] ? 1 : -1
);
for (let i = 0; i < this.rows.length; i++) {
this.tableData.push({
rowId: this.rows[i].id, ...this.rows[i].values });
}
} else {
this.filterData.sort((a, b) => a[this.name].localeCompare(b[this.name]));
}
},
// 降序
downOrder() {
if (!this.filterData) {
this.tableData = [];
this.rows.sort((a, b) =>
a.values[this.name] < b.values[this.name] ? 1 : -1
);
for (let i = 0; i < this.rows.length; i++) {
this.tableData.push({
rowId: this.rows[i].id, ...this.rows[i].values });
}
}else {
this.filterData.sort((a, b) => b[this.name].localeCompare(a[this.name]));
}
},