vue实现通过获取登录用户的userId和userName从数据库筛选用表格展示出他处理的那部分数据的代码

假设你已经获取到了登录用户的 `userId` 和 `userName`，并且你的数据存储在一个名为 `dataList` 的数组中，下面是一个简单的 Vue 组件示例，它将根据登录用户的信息来筛选数据并用表格展示出来：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>编号</th>
          <th>名称</th>
          <th>处理人</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in filteredData" :key="index">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.handler }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: [
        { id: 1, name: '数据1', handler: '小明' },
        { id: 2, name: '数据2', handler: '小红' },
        { id: 3, name: '数据3', handler: '小明' },
        { id: 4, name: '数据4', handler: '小明' },
        { id: 5, name: '数据5', handler: '小红' },
      ]
    }
  },
  computed: {
    filteredData() {
      return this.dataList.filter(item => item.handler === this.$store.state.user.userName && item.handlerId === this.$store.state.user.userId)
    }
  }
}
</script>

在上面的代码中，我们使用了一个 `computed` 计算属性 `filteredData` 来筛选数据。它使用 `filter()` 方法来过滤掉不符合条件的数据，只保留处理人为当前登录用户的数据。然后，我们在模板中使用 `v-for` 指令将过滤后的数据渲染到表格中。注意，这里的 `handlerId` 是指用户在数据库中的唯一标识，需要根据你的实际情况进行修改。