共计 1020 个字符,预计需要花费 3 分钟才能阅读完成。
需要是监听点击 echarts 柱状图事件,回调函数对图表底下的表单进行数据的筛选展现,图例如下
点击后 Date 列只展现 Jan
代码如下:
data(){tabledata_Mylist:[],
statesOptions: [{ value: 'Jan', text: 'Jan'},
{value: 'Feb', text: 'Feb'},
{value: 'Mar', text: 'Mar'},
{value: 'Apr', text: 'Apr'},
{value: 'May', text: 'May'},
{value: 'Jun', text: 'Jun'},
{value: 'Jul', text: 'Jul'},
{value: 'Aug', text: 'Aug'},
{value: 'Sep', text: 'Sep'},
{value: 'Oct', text: 'Oct'},
{value: 'Nov', text: 'Nov'},
{value: 'Dec', text: 'Dec'}
],
echart_Mychart: null,
echart_Mychart_Option:{}}
methods:{
// 监听图表点击事件
Mychart_click_method_mounted() {
this.echart_Mychart.on('click', params => {
this.$http
.get(
'http://10.***/Mylist/' +
params.name
)
.then(res => {console.log(res.data)
this.tabledata_Mylist = res.data
})
})
}
// 表格筛选性能的办法.
filterHandler(value, row, column) {const property = column['property']
return row[property] === value
},
}
表格局部代码
<el-table
:data="tabledata_Mylist" // 绑定数据
height="320"
stripe
style="width: 110%"
class="tableStyle"
>
<el-table-column
prop="date"
label="Date"
width="100"
column-key="id"
:filters="statesOptions"
:filter-method="filterHandler" // 筛选办法
align="center"
/>
</el-table>
正文完