element.ui(table&pagination)以及echarts的使用

element.ui框架—Table

先说一下项目里修改element.ui样式，改样式之前我们需要整明白style标签里的scoped是用来限制当前页面的样式，也就是说只要加上了scoped那当前页面的style样式就只作用于当前页面，不会污染全局的样式。scoped对element样式是有影响的，在修改element样式时候无论怎么选择标签优先级都无法改变其样式，要么把scoped去掉影响全局样式，要么就是再创建一个style标签不加scoped，要么就需要使用  " >>>" （深度作用选择器,我最常用方法）

Table-表格添加标签元素

scope.row.data(data是不固定的，可以是name或者别的)，span的样式我写的是一个圆点

data数据

效果图：

效果图

Table(修改列，单元格)

:cell-style="tableRowStyle"修改单元格样式， ：row-style=" tableRowStyle "修改行的样式      tableRowStyle 是一个函数

修改单元格样式

pagination分页的使用（按需加载封装）

分页器的使用一般都是需要请求接口拿到数据进行页面的分割和跳转，大多数时候都是以按需加载请求的数据，

currentPage（初始页面）、pagesize（当前页面需要展示几条数据）、total（总共多少条数据）、tableData(需要遍历的数据)

handleCurrentChange是当前页面改变时触发的函数，回调参数是当前页，那我们就可以根据这个当前页面改变时所触发的事件进行请求封装，只要每触发一次handleCurrentChange我们就请求一下接口，达到按需请求加载。

根据页面展示需求和接口文档，进行相应的传参（currentCount、currentNo是根据接口文档说明进行的传参属性，它们分别表示的是每页几条数据和展示第几页） 这里我把每页显示的pagesize写成死的了，（每页展示4条数据） ，请求到数据拿到我们需要的总数据条数（total）和需要遍历的数组对象（tableData，也就是页面的4条数据），别忘了在钩子函数 created 中调用封装的方法（  this.ports（） ）

最后在需要的地方进行v-for遍历展示我们的数据就行了

echarts使用—饼图

我的需求是只需要一个圆，没有折线和其他的提示文本，也就是将echarts饼图进行了简单的分解，（滑动效果还是有的，下面的文字为自己写的标签，并不是echarts里面的）如图所示：

那首先我们需要一个容器来展示echarts，我把它放在id为tb的div里：

类名bigRadiu为定位在中间白色的圆，股权占比没显示可以不用管，（因为截图和上面的不是同一个容器）

color颜色的顺序是和option里面的data顺序对应的，center["42%" "50%"]表示的是圆的X轴和Y轴距离，startAngle表示的是颜色开始的地方或者角度，默认为圆的右上。

接下来就是获取Dom元素，添加内容了

上面的data数据是没有带滑过提示消息的，如果需要，需在option下面加上tooltip数据，看下图

里面是有ABCD4个值的，这里只展示了2个，echarts这里说的不是很详细，网上有很多详细的资料可以参考