SpingBoot + Vue + Element UI + Echarts 整合的小 Demo

添加数据 |

数据管理 |

饼图 |

柱状图

• 使用Element UI 官网 https://element.eleme.io/#/zh-CN 直接复制使用

• Element UI 表格嵌入图片

=================================================================

<el-table

:data=“tableData”

border

style=“width: 100%”>

<el-table-column

prop=“icon”

label=“图片”

width=“160”>

<el-table-column

fixed=“right”

label=“操作”

width=“100”>

//传递参数把操作的此行对象传入 fruitDelete(scope.row)

<el-button @click=“fruitDelete(scope.row)” type=“text” size=“small”>删除

<el-button @click=“findFruit(scope.row)” type=“text” size=“small”>编辑

• 数据校验

<el-button type=“primary” @click=“onSubmit(‘fruitRules’)”>立即创建

<el-button @click=“onSubmit1(‘form’)”>取消

• APP、Table、Edit、Add、Bar、Pie.Vue

添加数据 |

数据管理 |

饼图 |

柱状图

<el-table

:data=“tableData”

border

style=“width: 100%”>

<el-table-column

fixed

prop=“id”

label=“水果ID”

width=“160”>

<el-table-column

prop=“name”

label=“水果名称”

width=“160”>

<el-table-column

prop=“sale”

label=“水果销量”

width=“160”>

<el-table-column

prop=“icon”

label=“图片”

width=“160”>

<el-table-column

fixed=“right”

label=“操作”

width=“100”>

<el-button @click=“fruitDelete(scope.row)” type=“text” size=“small”>删除

<el-button @click=“findFruit(scope.row)” type=“text” size=“small”>编辑

<el-button type=“primary” @click=“onSubmit(‘form’)”>立即修改

<el-button @click=“onSubmit1(‘form’)”>取消

<el-button type=“primary” @click=“onSubmit(‘fruitRules’)”>立即创建

<el-button @click=“onSubmit1(‘form’)”>取消