<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>
