cyt_log/pages/demo/table/table.vue

<template>
    <view>
        <view class="uni-header">
            <view class="uni-group hide-on-phone">
                <view class="uni-title">{{$t('demo.table.title')}}</view>
            </view>
            <view class="uni-group">
				<input class="uni-search" type="text" v-model="searchVal" @confirm="search" :placeholder="$t('common.placeholder.query')" />
				<button class="uni-button" type="default" size="mini" @click="search">{{$t('common.button.search')}}</button>
				<button class="uni-button" type="primary" size="mini">{{$t('common.button.add')}}</button>
				<button class="uni-button" type="warn" size="mini" @click="delTable">{{$t('common.button.batchDelete')}}</button>
            </view>
        </view>
        <view class="uni-container">
            <uni-table :loading="loading" border stripe type="selection" :emptyText="$t('common.empty')" @selection-change="selectionChange">
                <uni-tr>
                    <uni-th width="150" align="center">日期</uni-th>
                    <uni-th width="150" align="center">姓名</uni-th>
                    <uni-th align="center">地址</uni-th>
                    <uni-th width="204" align="center">设置</uni-th>
                </uni-tr>
                <uni-tr v-for="(item ,index) in tableData" :key="index">
                    <uni-td>{{item.date}}</uni-td>
                    <uni-td>
                        <view class="name">{{item.name}}</view>
                    </uni-td>
                    <uni-td>{{item.address}}</uni-td>
                    <uni-td>
                        <view class="uni-group">
                            <button class="uni-button" size="mini" type="primary">{{$t('common.button.edit')}}</button>
                            <button class="uni-button" size="mini" type="warn">{{$t('common.button.delete')}}</button>
                        </view>
                    </uni-td>
                </uni-tr>
            </uni-table>
            <view class="uni-pagination-box">
                <uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total" @change="change" />
            </view>
        </view>
		<!-- #ifndef H5 -->
		<fix-window />
		<!-- #endif -->
    </view>
</template>

<script>
    import tableData from './tableData.js'
    export default {
        data() {
            return {
                searchVal: '',
                tableData: [],
                // 每页数据量
                pageSize: 10,
                // 当前页
                pageCurrent: 1,
                // 数据总量
                total: 0,
                loading: false
            }
        },
        onLoad() {
            this.selectedIndexs = []
            this.getData(1)
        },
        methods: {
            // 多选处理
            selectedItems() {
                return this.selectedIndexs.map(i => this.tableData[i])
            },
            // 多选
            selectionChange(e) {
                console.log(e.detail.index);
                this.selectedIndexs = e.detail.index
            },
            //批量删除
            delTable() {
                console.log(this.selectedItems());
            },
            // 分页触发
            change(e) {
                this.getData(e.current)
            },
            // 搜索
            search() {
                this.getData(1, this.searchVal)
            },
            // 获取数据
            getData(pageCurrent, value = "") {
                this.loading = true
                this.pageCurrent = pageCurrent
                this.request({
                    pageSize: this.pageSize,
                    pageCurrent: pageCurrent,
                    value: value,
                    success: (res) => {
                        // console.log('data', res);
                        this.tableData = res.data
                        this.total = res.total
                        this.loading = false
                    }
                })
            },
            // 伪request请求
            request(options) {
                const {
                    pageSize,
                    pageCurrent,
                    success,
                    value
                } = options
                let total = tableData.length
                let data = tableData.filter((item, index) => {
                    const idx = index - (pageCurrent - 1) * pageSize
                    return idx < pageSize && idx >= 0
                })
                if (value) {
                    data = []
                    tableData.forEach(item => {
                        if (item.name.indexOf(value) !== -1) {
                            data.push(item)
                        }
                    })
                    total = data.length
                }

                setTimeout(() => {
                    typeof success === 'function' && success({
                        data: data,
                        total: total
                    })
                }, 500)

            }

        }
    }
</script>

<style>
	/* #ifndef H5 */
	page {
		padding-top: 85px;
	}
	/* #endif */
</style>