<template>
    <div>
      <el-table :data="articles" style="width: 100%">
        <el-table-column prop="id" label="稿件ID" width="100"></el-table-column>
        <el-table-column prop="title" label="稿件标题"></el-table-column>
        <el-table-column prop="author" label="作者"></el-table-column>
        <el-table-column prop="amount" label="缴费金额" width="120"></el-table-column>
        <el-table-column prop="status" label="缴费状态" width="120"></el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button @click="payArticle(scope.row)" type="primary" size="small">缴费</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        articles: [
          { id: 1, title: '稿件1', author: '作者1', amount: 100, status: '未缴费' },
          { id: 2, title: '稿件2', author: '作者2', amount: 200, status: '未缴费' },
          { id: 3, title: '稿件3', author: '作者3', amount: 300, status: '未缴费' },
          // 更多稿件数据...
        ]
      };
    },
    methods: {
      payArticle(article) {
        // 在这里实现缴费逻辑，例如调用后端API进行缴费
        // 缴费成功后更新article.status为'已缴费'
        article.status = '已缴费';
        this.$message.success(`已成功为稿件 ${article.title} 缴费`);
      }
    }
  };
  </script>