帮我用vue2 + elementUi 生成 列表页面 带有交互 并且顶部有状态切换

好的，下面是一个简单的示例代码：

<template>
  <div>
    <el-radio-group v-model="status" @change="handleStatusChange">
      <el-radio-button label="all">全部</el-radio-button>
      <el-radio-button label="published">已发布</el-radio-button>
      <el-radio-button label="draft">草稿</el-radio-button>
    </el-radio-group>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="title" label="标题"></el-table-column>
      <el-table-column prop="author" label="作者"></el-table-column>
      <el-table-column prop="status" label="状态"></el-table-column>
      <el-table-column prop="actions" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      status: 'all',
      tableData: [
        {
          title: '文章1',
          author: '作者1',
          status: 'published'
        },
        {
          title: '文章2',
          author: '作者2',
          status: 'draft'
        },
        {
          title: '文章3',
          author: '作者3',
          status: 'published'
        }
      ]
    }
  },
  methods: {
    handleStatusChange() {
      // 根据状态切换数据
      if (this.status === 'all') {
        // 显示所有数据
        this.tableData = [
          {
            title: '文章1',
            author: '作者1',
            status: 'published'
          },
          {
            title: '文章2',
            author: '作者2',
            status: 'draft'
          },
          {
            title: '文章3',
            author: '作者3',
            status: 'published'
          }
        ]
      } else {
        // 显示符合状态的数据
        this.tableData = this.tableData.filter(item => item.status === this.status)
      }
    },
    handleEdit(item) {
      // 处理编辑操作
      console.log('编辑文章：', item)
    },
    handleDelete(item) {
      // 处理删除操作
      console.log('删除文章：', item)
    }
  }
}
</script>

这是一个简单的列表页面示例，包含了顶部状态切换和交互。其中，el-radio-group 组件用于状态切换，el-table 组件用于展示数据，el-table-column 组件用于定义列，可以使用 prop 属性指定数据的字段名。在列中使用 slot-scope 属性可以定义自定义模板，用于渲染操作按钮等交互元素。在方法中可以处理编辑和删除操作，根据需要进行相应的处理即可。