el-tab col

引用[1]:在实现效果方面，可以使用Element UI的Tabs标签页来实现显示不同状态的数据。通过设置不同的标签页名称和对应的标签页内容，可以实现根据状态渲染不同的数据。例如，可以设置标签页名称为"所有"、"进行中"、"已过期"和"已完成"，然后根据用户选择的标签页名称来展示相应的数据。[1]

引用[2]:在样式修改方面，可以使用以下样式来解决滚动问题。通过设置.el-tabs__content的样式，将其position设置为relative，height设置为100%，padding设置为0px，可以确保滚动时只有内容区域滚动，而标签栏固定在顶部。[2]

引用[3]:在尝试解决问题时，可以尝试以下方法。首先，可以尝试将echarts图表封装成一个组件，并在组件中使用v-if判断容器是否挂载完毕，然后再初始化echarts图表。如果这种方法不起作用，可以尝试在容器初始化时使用resize()方法或给el-tab-pane设置lazy属性。另外，还可以在生命周期mounted中使用Object.defineProperty给容器添加属性clientWidth和clientHeight，以解决警告问题。但是需要注意，这种方法可能会影响自适应性能。[3]

综上所述，可以使用Element UI的Tabs标签页来实现显示不同状态的数据，通过设置不同的标签页名称和对应的标签页内容来渲染数据。同时，可以通过样式修改来解决滚动问题，并尝试使用组件封装、判断容器挂载完毕和使用Object.defineProperty等方法来解决警告问题。