vue element ui el-popover组件改造滚动显示信息

Posted 2023-03-06

参考技术A <template>
<div>
<ul>
<li v-for="org in orgs" :key="org" style="list-style-type: none">
<el-popover placement="right" width="800" trigger="hover">
<el-table
v-loading="listLoading"
:data="orglist"
border
fit
highlight-current-row
style="width: 100%"
>
<el-table-column
:label=" t('table.location')"
prop="username"
>
<template slot-scope=" row ">
<span> row.location </span>
</template>
</el-table-column>
<el-table-column :label=" t('table.role')" prop="role">
<template slot-scope=" row ">
<span> row.role </span>
</template>
</el-table-column>
</el-table>
<el-button slot="reference" width="180" @click="getText">
org
</el-button>
</el-popover>
</li>
</ul>
</div></template>
<script>

export default
name: 'UserTable',
data()
return
orglist: null

methods:
getText(e)
this.orglist = null
var temp = null
console.log(e.target.innerText)
this.orgQuery.filterValue = e.target.innerText
if (e.target.innerText !== this.orgs[0])
this.orgQuery = this.getAllUsers

console.log(this.orgQuery)
fetchUsers(this.orgQuery).then(response =>
temp = response.data.data.list
console.log('temp', temp)
if (e.target.innerText === this.orgs[0])
this.orglist = temp

if (e.target.innerText === this.orgs[1])
this.orglist = temp.filter((item) => item.organization['name'] !== this.orgs[0])

this.orgQuery =
filterField: 'organizationName',
filterValue: ''

)


</scipt>