kuailelunwen_new_houtai/src/views/super/Ranking/YearProfit.vue

<template>
    <div class="demo-wrap min-flex-right">
        <div class="flex-between">
            <h2>总利润 - 年排行</h2>
            <el-form :model="form">
                <GuipSelect v-model="form.payword" :defaultValue="form.payword" prop="payword" width="100%"
                    :options="options_payword" />
            </el-form>
        </div>
        <div class=" flex-common" id="">
            <el-form>
                <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
                    style="width: 100%" :key="random()">
                    <el-table-column type="index" label="排序" width="100">
                      <template slot-scope="scope">
                        {{ scope.row.sort }}
                      </template>
                    </el-table-column>
                    <!-- 其他列 -->
                    <el-table-column prop="name" label="年份">
                        <template slot-scope="scope">
                          {{ scope.row.value_1 }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="count" label="总利润/元" sortable>
                        <template slot-scope="scope">
                            <div class="flex">
                              {{ scope.row.value_2 }}
                              {{scope.row.value }}%上年持平
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column prop="count" label="代理商排行">
                      <template slot-scope="scope">
                        <div class="flex">
                          {{ scope.row.value_1 }}
                          <span class="flex"><img class="edit_icon" src="../../../assets/site/form_link.svg" alt=""></span>
                        </div>
                      </template>
                    </el-table-column>
                </el-table>
                <el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange'
                    :current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper"
                    :total="tableData.length">
                </el-pagination>
            </el-form>
        </div>
    </div>
</template>
<script>
import GuipSelect from '@/components/GuipSelect.vue'
export default {
    // 站点设置
    name: '',
    props: [''],
    components: {
        GuipSelect,
        // GuipSelectFilter,
    },
    data() {
        return {
            phoneService: [
                {
                    text: '不限',
                    value: '0'
                },
                {
                    text: 'H5',
                    value: '1'
                },
                {
                    text: '小程序',
                    value: '2'
                },
                {
                    text: 'H5以及小程序',
                    value: '3'
                },
            ],
            currentPage: 1,    //当前页
            pageSize: 20,   //每页的容量
            total: 0,   //列表总数
            options_payword: [
                {
                    label: '按篇', value: '0'
                },
                {
                    label: '按字符', value: '1'
                },
            ],
            options: [
                { label: '选项1', value: '1' },
                { label: '选项2', value: '2' },
                { label: '选项3', value: '3' },
                // 更多选项...
            ],
            filteredOptions: this.options,

            phoneServicelist:
            {
                0: '不限',
                1: ' H5',
                2: '小程序',
                3: '无手机服务'

            },
            tableData: [],
            form: {
                payword: '0',
            }
        }
    },
    mounted() {
        // this.$refs.scrollContainer.scrollTo(0)
      this.getRankingData();
    },
    methods: {
        getRankingData(){
          const that = this
          this.$http('POST', this.reqUri + '/super/ajax_get_rank_detail',{
            rank_type:1,
          }).then(response => {
            that.tableData = response.data.list
            console.log(response.data.list, '0001')
          })
          .catch(error => {
            console.error(error, '-----')
          })
        },
        // 列筛选
        filterHandler(value, row, column) {
            //  console.log(value, row, column,'======');
            const property = column['property'];
            if (value == 0) {
                return row[property] != value
            }
            return row[property] === value;
        },
        // 自定义搜索筛选
        customFilter(keyword, options) {
            if (!keyword) return options
            return options.filter(item => {
                // 自定义筛选逻辑
                return item.label.includes(keyword) || item.value.includes(keyword)
            })
        },
        handleSizeChange(val) {
            this.pageSize = val
        },
        handleCurrentChange(val) {
            this.currentPage = val
        },
        random() {
            var randomNumber = Math.random();
            return randomNumber
        },
    }
}
</script>
<style scoped lang="scss">
.demo-wrap {
    width: 100%;
    letter-spacing: 0.08em;
}
</style>