Primero, veamos los datos devueltos de tabledata, que solo contiene los nombres de las columnas individuales y los datos de cada fila (filas). En este momento, necesitamos ordenar los datos de cada columna, pero solo podemos operar los datos de cada fila de filas Este punto Para aclarar, no necesita filtrar los datos de la columna y operar directamente en los datos de la fila
Se deben considerar dos situaciones, ordenar los datos de la tabla inicial y ordenar los datos del filtro después de
filtrar los datos de la tabla.
- Secuencia positiva AZ
- ZA invertida
this.rows representa los datos de la fila que deben filtrarse (se pueden obtener durante la inicialización)
@change="change" se usa para obtener el valor cuando cambia el-
select
<!-- 排序气泡框 -->
<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]));
}
},