Vue2 + Element UI 列表页面生成：带状态切换和交互示例

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