Слияние кода завершено, страница обновится автоматически
vxe-table-plugin-renderer — это плагин для расширения функционала таблиц vxe-table, предоставляющий некоторые часто используемые рендереры.
Плагин основан на vxe-table версии 4.
npm install vxe-table@next vxe-table-plugin-renderer@next
// ...
import VXETable from 'vxe-table'
import VXETablePluginRenderer from 'vxe-table-plugin-renderer'
import 'vxe-table-plugin-renderer/dist/style.css'
// ...
VXETable.use(VXETablePluginRenderer)
| Свойство | Описание | Тип | Возможные значения | Значение по умолчанию |
|---|---|---|---|---|
| bar.width | Ширина столбцов | number | string | — |
| bar.max | Максимальное значение столбцов | number | — | — |
| colors | Список цветов столбцов | string[] | — | — |
| tooltip.formatter | Формат содержимого подсказки | string | — | — |
| label.color | Цвет отображаемого значения | string | — | — |
| label.formatter | Формат отображаемого значения ({row, value}) | string | — | — |
| Свойство | Описание | Тип | Возможные значения | Значение по умолчанию |
|---|---|---|---|---|
| diameter | Диаметр круговой диаграммы | number | string | — |
| margin | Расстояние между круговыми диаграммами | number | string | — |
| colors | Цвета секторов круговой диаграммы | string[] | — | — |
| tooltip.formatter | Формат содержимого подсказки | string | — | — |
| ring.diameter | Диаметр внутреннего круга | number | string | — |
| ring.color | Цвет внутреннего круга | string | — | — |
| label.color | Цвет отображаемого значения | string | — | — |
| label.formatter | Формат отображаемого значения ({row, value}) | string | — | — |
| Свойство | Описание | Тип | Возможные значения | Значение по умолчанию |
|---|---|---|---|---|
| colors | Список цветов для каждого элемента | string[] | — | — |
<vxe-table
border
show-overflow
height="400"
:data="tableData">
<vxe-column type="checkbox" width="60"></vxe-column>
<vxe-column field="name" width="200"></vxe-column>
<vxe-column field="num1" title="Bar" :cell-render="{name: 'bar'}"></vxe-column>
<vxe-column field="num2" title="Ring" :cell-render="{name: 'pie'}"></vxe-column>
<vxe-column field="num3" title="Rate" :cell-render="{name: 'rate'}"></vxe-column>
</vxe-table>
export default {
data () {
return {
tableData: [
{ id: 100, name: 'test1', num1: [30, 47], num2: [60, 36, 36], num3: 3 },
{ id: 101, name: 'test2', num1: [15, 22], num2: [85, 22, 97], num3: 1 },
{ id: 102, name: 'test3', num1: [75, 36], num2: [45, 84, 66], num3: 5 }
]
}
}
}
Лицензия MIT, 2019–настоящее время, Сюй Лянчжан.
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )