iview/src/components/table/table-head.vue

<template>
    <table cellspacing="0" cellpadding="0" border="0" :style="style">
        <colgroup>
            <col v-for="column in columns" :width="setCellWidth(column, $index)">
        </colgroup>
        <thead>
            <tr>
                <th v-for="column in columns" :class="alignCls(column)">
                    <div :class="cellClasses(column)">
                        <template v-if="column.type === 'selection'"><Checkbox :checked="isSelectAll" @on-change="selectAll"></Checkbox></template>
                        <template v-else>
                            {{{ renderHeader(column, $index) }}}
                            <span :class="[prefixCls + '-sort']" v-if="column.sortable">
                                <i class="ivu-icon ivu-icon-arrow-up-b" :class="{on: sortType === 'asc'}" @click="handleSortAsc($index)"></i>
                                <i class="ivu-icon ivu-icon-arrow-down-b" :class="{on: sortType === 'desc'}" @click="handleSortDesc($index)"></i>
                            </span>
                        </template>
                    </div>
                </th>
            </tr>
        </thead>
    </table>
</template>
<script>
    import Checkbox from '../checkbox/checkbox.vue';
    import Mixin from './mixin';
    import { deepCopy } from '../../utils/assist';

    export default {
        mixins: [ Mixin ],
        components: { Checkbox },
        props: {
            prefixCls: String,
            style: Object,
            columns: Array,
            objData: Object,
            fixed: Boolean
        },
        data () {
            return {
                sortType: 'normal'
            }
        },
        computed: {
            isSelectAll () {
                let isSelectAll = true;
                for (let i in this.objData) {
                    if (!this.objData[i]._isChecked) isSelectAll = false;
                }

                return isSelectAll;
            }
        },
        methods: {
            cellClasses (column) {
                return [
                    `${this.prefixCls}-cell`,
                    {
                        [`${this.prefixCls}-hidden`]: !this.fixed && column.fixed && (column.fixed === 'left' || column.fixed === 'right')
                    }
                ]
            },
            setCellWidth (column, index) {
                return this.$parent.setCellWidth(column, index);
            },
            renderHeader (column, $index) {
                if ('renderHeader' in this.columns[$index]) {
                    return this.columns[$index].renderHeader(column, $index);
                } else {
                    return column.title || '#';
                }
            },
            selectAll () {
                const status = !this.isSelectAll;
                this.$parent.selectAll(status);
            },
            handleSortAsc (index) {
                if (this.sortType === 'asc') {
                    this.sortType = 'normal';
                    this.$parent.handleSort(index, 'normal');
                } else {
                    this.sortType = 'asc';
                    this.$parent.handleSort(index, 'asc');
                }
            },
            handleSortDesc (index) {
                if (this.sortType === 'desc') {
                    this.sortType = 'normal';
                    this.$parent.handleSort(index, 'normal');
                } else {
                    this.sortType = 'desc';
                    this.$parent.handleSort(index, 'desc');
                }
            }
        }
    }
</script>