Code pull completed, the page will refresh automatically
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–настоящее время, Сюй Лянчжан.
You can comment after Login
Inappropriate content may be displayed here and will not be shown on the page. You can check and modify it through the relevant editing function
If you confirm that the content does not involve inappropriate language/advertisement redirection/violence/vulgar pornography/infringement/piracy/false/insignificant or illegal content related to national laws and regulations, you can click submit to make an appeal, and we will handle it as soon as possible.
Comments ( 0 )