Про нормальную табличную сортировку elmentUI и говорить нечего, но иногда в реальном проектном процессе требуются динамические столбцы, так же динамические столбцы означают, что поле prop неопределенно, а сортировка динамических столбцов не может быть обработана из-за отсутствия полей , И нам нужно заполнить динамические столбцы и отсортировать динамические столбцы в соответствии с различными ситуациями [внешняя сортировка].
динамический столбец
Текущий обнаруженный элемент заключается в том, что таблица может иметь разное количество столбцов в зависимости от года/квартала/месяца, например, год имеет [2020, 2019, ...], квартал [2020-4 квартал, 2020-3 квартал , ...], ежемесячно [2020-декабрь, 2020-ноябрь...], и каждый тип поля не определен, например, год может быть 2 года, может быть 3 года, может быть 6 лет, что требует Несколько столбцов являются динамическими, и поскольку столбцы являются динамическими, соответствующие атрибуты и значения заголовков, извлекаемые в фоновом режиме, представляют собой массивы, а не отдельные значения.
Схема реализации динамического столбца 1 (столбцы не нужно сортировать опционально)
Динамический столбец определяется как динамический массив, в котором хранятся только значения заголовков, запрошенные из фона, например [2019-10, 2019-9, 2019-8], для данных таблицыбудет обрабатывать массив в массиве как строку, вы не можете получить конкретное значение, вам нужно использовать фильтр для обработки данных в соответствующие данные, соответствующий код реализации выглядит следующим образом
<template>
<el-table :data="dataList" >
<!-- 动态生成列 -->
<el-table-column
v-for="(item,index) in theadList"
:key="index"
:label="item"
prop="colprops"
align="center"
>
<template slot-scope="scope">
<div>{{ scope.row.colprops | transToValue(index)) }}</div>
</template>
</el-table-column>
<!-- 动态生成列结束 -->
</el-table>
<template>
<script>
export default {
filters: {
transToValue(val, index) {
return val[index]
}
},
data() {
return {
theadList: [],
dataList: []
}
},
methods: {
queryList(){
const data = {...}
this.$http.post(data).then(res => {
// 对表头进行赋值处理 res.dataArr中包含表头数组 例如[2019,2018,2017,2016]
this.theadList = res.dateArr
//res.rows中每项的colprops属性中包启有所有表头[2019,2018,2017,2016]列对应，用filter后就可以将对应的值取出处理
//如res.rows[0]为一个{
// colprops: ['8%', '9.6%', '6.4%', '6%']，
otherVal: 'xxxx'
//}
this.dataList = res.rows
}).catch(err => { ...})
}
}
}
<script>
Схема реализации динамического столбца 2 (столбцы нужно сортировать)
Поскольку для достижения сортировки первое решение не может получить атрибуты соответствующего столбца, и невозможно отсортировать каждый элемент динамического столбца отдельно, поэтому есть второе решение.Первое решение может решить проблему динамического отображения данных, а второе решение может сделать таблицу динамической Столбцы сортируются различными методами, как обычные столбцы Принцип состоит в том, чтобы назначить динамические неопределенные столбцы соответствующим значениям атрибутов, чтобы каждому элементу элемента массива заголовков можно было присвоить значения атрибутов становится {label: 'collabel', props: 'colProps'} Затем свойство каждого элемента данных может быть получено как значение colProps, исходный код выглядит следующим образом
<template>
<!-- 表格list -->
<el-table :data="dataList" border @sort-change="changeTableSort">
<!-- 动态生成列 -->
<el-table-column
v-for="(item,index) in theadList"
:key="index"
:label="item.label"
:prop="item.prop"
:sortable="'custom'"
>
<!--如果数据还需要处理，否则不用以下代码-->
<template slot-scope="scope">
<div>{{ scope.row[item.prop] | toFixed(6) }}</div>
</template>
</el-table-column>
<!-- 动态生成列结束 -->
</el-table>
</template>
<script>
export default {
data() {
return {
// 动态列表头及属性
theadList: [{ label: '', prop: '' }],
dataList: []
}
},
mounted() {
this.queryList()
},
methods: {
queryList() {
const data = {...}
this.$http.post(data).then(res => {
this.loading = false
// 对表头进行赋值处理 prop中的tr[index]与 datalist中的item项的 item['tr'+ i]一一对应
this.theadList = res.dateArr.map((item, index) => {
return {
label: item,
prop: 'tr' + index
}
})
// 对表头对应的每一列的属性进行赋值
// 为了能正常排序 需要对所有的数值进行处理 【如果有需要数字型进行排序null或者空字付串的数值请处理为0】
this.dataList = res.rows
this.dataList.forEach(item => {
for (let i = 0; i < res.dateArr.length; i++) {
item['tr' + i] = item.rateArr[i] || '0'
}
})
}).catch(err => {... })
},
// 排序列改变返回当前需要排序的列
changeTableSort(e) {
//获取当前列的字段
const prop = e.prop
// 如果按降序
if (e.order === 'descending') {
//根据需要对字段进行写排序
this.dataList = this.dataList.sort((a, b) => {
return parseFloat(a[prop]) - parseFloat(b[prop])
})
} else { //发果是降序
this.dataList = this.dataList.sort((a, b) => {
return parseFloat(b[prop]) - parseFloat(a[prop])
})
}
}
}
}
</script>
Динамическая сортировка столбцов
- Если вам нужна динамическая сортировка столбцов, поэтому реквизиты должны иметь динамическое значение свойства, поскольку это динамическая колонна, фиксированное свойство, безусловно, не существует, то нам нужно иметь пользовательские атрибуты поля для использования таблицы
- Поля настраиваемых атрибутов в заголовке соответствуют полям настраиваемых атрибутов в данных.Например, если заголовок определен как cols1, cols2, cols3, то один элемент списка данных имеет совпадающие атрибуты и значения, соответствующие друг другу , Такие как
const = theadList = [
{label: '2019年', prop: 'cols1'},
{label: '2018年', prop: 'cols2'}
]
const dataList = [{
cols1: 'xxx',
cols2: 'xxxx',
}]
- В использованииchangeTableSortПри сортировке, если вы сортируете по числовому значению, если есть значение, такое как null, '', вам нужно сначала обработать его как 0, а затем сравнить, иначе только что отсортированный метод может быть недействительным.
- Все числовые методы сортировки верны, но проблема с сортировкой все еще есть. Пожалуйста, проверьте,установить: sortable="'Пользовательский'"
- С исходным кодом