根据数据用vue+element写一个表格，显示这个接口的数据，并且可以筛选出qualityScore不为null的数据，表头为序号，分数，备注，平均分，其中最后一行平均分合并显示

在Vue.js中使用Element UI创建一个表格来显示接口数据并过滤`qualityScore`非空的数据，你可以按照以下步骤操作：

1. 首先，安装必要的依赖：

   npm install vue-element-admin axios

2. 引入所需的组件和库：

import { Table, Column, ElForm } from 'element-ui';
import axios from 'axios';

3. 定义数据结构和计算属性：

export default {
  data() {
    return {
      tableData: [],
      qualityFilter: '', // 筛选质量分的输入框值
      averageScore: null, // 平均分计算结果
      loading: false, // 加载状态
    };
  },
  computed: {
    filteredTableData() {
      return this.tableData.filter(item => item.qualityScore !== null && item.qualityScore.toString().includes(this.qualityFilter));
    },
  },
  methods: {
    fetchData() {
      this.loading = true;
      axios.get('your-api-url') // 替换为你实际的API地址
        .then(response => {
          this.tableData = response.data; // 假设接口返回的是一个数组，每个元素包含序号、分数、备注和质量分
          // 计算平均分（这里只是一个简化示例，实际处理可能需要遍历所有有效评分）
          let sum = this.filteredTableData.reduce((total, item) => total + item.qualityScore, 0);
          this.averageScore = sum / this.filteredTableData.length || '无数据';
          this.loading = false;
        })
        .catch(error => {
          console.error('Error fetching data:', error);
          this.loading = false;
        });
    },
  },
  mounted() {
    this.fetchData();
  },
};

4. HTML模板部分，展示表格和筛选功能：

<template>
  <div>
    <el-form :inline="true" :model="qualityFilter">
      <el-form-item label="质量分筛选">
        <el-input v-model="qualityFilter" placeholder="请输入关键词"></el-input>
      </el-form-item>
    </el-form>

    <el-table :data="filteredTableData" highlight-current-row>
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column prop="score" label="分数"></el-table-column>
      <el-table-column prop="remark" label="备注"></el-table-column>
      <el-table-column prop="qualityScore" label="质量分"></el-table-column>
    </el-table>

    <div v-if="averageScore !== null" style="margin-top: 20px;">
      平均分：{{ averageScore }}
    </div>
  </div>
</template>

当你运行此代码，会有一个带有筛选功能的表格，它只显示`qualityScore`不为null的数据，以及一个展示平均分的部分（如果有足够的数据）。