kuailelunwen_new_houtai/src/views/SiteSem.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">
                    </el-table-column>
                    <!-- 其他列 -->
                    <el-table-column prop="name" label="站点简称" width="210">
                        <template slot-scope="scope">
                            <a class="name_link flex cell_render" :href="scope.row.link" target="_blank">
                                {{ scope.row.name }}
                                <img class="edit_icon" src="@/assets/site/form_link.svg" alt="">
                            </a>
                        </template>
                    </el-table-column>
                    <el-table-column prop="registerDate" label="注册时间"></el-table-column>
                    <el-table-column prop="count" label="6月订单数" sortable width="230">
                        <template slot-scope="scope">
                            <div class="flex">
                                {{ scope.row.count }}
                                <span class="flex"><img class="edit_icon" src="@/assets/site/form_link.svg" alt="">{{
                                    scope.row.percentage }}%上年持平</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="price" label="8月订单数" sortable></el-table-column>
                    <el-table-column prop="phoneService" label="手机服务" :filters="phoneService"
                        :filter-method="filterHandler">
                    </el-table-column>
                    <el-table-column prop="status" label="状态" width="195"></el-table-column>
                    <!-- <el-table-column fixed="right" label="操作" width="182">
                    <template slot-scope="scope">
                        <div class="flex">
                            <el-button @click="handleServiceClick(scope.row)" type="text">服务列表</el-button>
                            <el-button @click="handleSetClick(scope.row)" type="text">站点设置</el-button>
                        </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: 2,   //每页的容量
            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: [
                {
                    name: '哈哈哈',
                    link: 'http://www.chachongz.com',
                    registerDate: '2025.02.18',
                    group: '1',
                    phoneService: '1',
                    status: '1',//配置中中
                    price: 10,
                    count: 23432,
                    percentage: '2.5'

                },
                {
                    name: '知网学诚教育',
                    link: 'http://new.checkcopy.com',
                    registerDate: '2025.02.18',
                    group: '2',
                    phoneService: '2',
                    status: '0',//运行中
                    price: 20,
                    count: 3432,
                    percentage: '17.5'
                },
                {
                    name: '哈哈哈111',
                    link: 'http://www.chachongz.com',
                    registerDate: '2025.02.18',
                    group: '1',
                    phoneService: '1',
                    status: '1',//配置中中
                    price: 10,
                    count: 7868,
                    percentage: '2.5'

                },
                {
                    name: '知网学诚教育2222',
                    link: 'http://new.checkcopy.com',
                    registerDate: '2025.02.18',
                    group: '2',
                    phoneService: '2',
                    status: '0',//运行中
                    price: 20,
                    count: 32432,
                    percentage: '17.5'
                },
            ],
            form: {
                payword: '0',
            }
        }
    },
    mounted() {
        // this.$refs.scrollContainer.scrollTo(0)
    },
    methods: {
        // 列筛选
        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>