elementui,template,scope.row,el-

<template>
  <div class="box-wrap">
    <!-- 搜索区域 -->
    <div class="search">
      <el-input v-model="searchText" placeholder="请输入缴费单位关键字" clearable></el-input>
      <el-button @click="getTableData">搜索</el-button>
    </div>
   <!-- //列表渲染部分 -->
    <div class="table-wrap">
      <el-table :data="tableData" border stripe>
        <el-table-column prop="countyName" label="城市" width="220">
        </el-table-column>
        <el-table-column prop="name" label="缴费单位">
        </el-table-column>
        <el-table-column label="配置时长" width="180">
          <template slot-scope="scope">
            <el-select v-model="scope.row.interval" size="mini" @change="editTimeChange(scope.row)" class="select-class">
              <el-option v-for="item in timeList" :key="item.label" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页部分 -->
    <div class="page">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[10, 20, 30, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="count">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import {
    LifepaymentList,
    LifepaymentEdit,
  } from '../../../api/api';
  export default {
    data() {
      return {
        searchText: "",
        timeList: [{
            label: "1个月",
            value: 1
          },
          {
            label: "2个月",
            value: 2
          },
          {
            label: "3个月",
            value: 3
          },
          {
            label: "4个月",
            value: 4
          },
          {
            label: "5个月",
            value: 5
          },
          {
            label: "6个月",
            value: 6
          }
        ],
        editTime: "",
        tableData: [],
        pageSize: 20,
        currentPage: 1,
        count: 523
      }
    },
    watch: {
      searchText() {
        if (this.searchText == "") {
          this.getTableData();
        }
      }
    },
    methods: {
      getTableData() {
        let params = {
          pageIndex: this.currentPage,
          pageSize: this.pageSize,
          name: this.searchText,
        };
        LifepaymentList(params).then(res => {
          if (res.status == 200) {
            this.tableData = res;
            console.log(this.tableData)
            this.count = res.count;
          } else {
            this.$message(res.message);
          }
        }).catch(err => {
          this.$message(err.message);
        })
      },
      editTimeChange(val) {
        let params = {
          id: val.pid,
          interval: val.interval
        };
        console.log("这一行val:", val, "----编辑参数params:", params);
        LifepaymentEdit(params).then(res => {
          if (res.status == 200) {
            this.getTableData();
            console.log("修改数据完成");
          } else {
            this.$message(res.message);
          }
        }).catch(err => {
          this.$message(err.message);
        })
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.getTableData();
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.getTableData();
      },
    },
    created() {
      this.getTableData();
    }
  }
</script>

<style lang="scss" scoped>
  .search {
    margin-bottom: 10px;

    .el-input {
      width: 300px;
      margin-right: 10px;
    }
  }
</style>