排序表头

在展示数据的时候，需要进行排序

image.png

简单的使用了两个方法一个变量来控制图标就可以了（太晚了困了，留坑配上排序方法）

<div id="app">
    <el-row :gutter='20' class="order-column">
        <el-col :span="4">
            <p>排序方式</p>
        </el-col>
        <el-col :span="4">
            <p @click="clickOrder">star:<i v-if="orderIcon=='1'" class="el-icon-caret-top"></i><i v-else-if="orderIcon=='-1'" class="el-icon-caret-bottom"></i></p>
        </el-col>
    </el-row>
    <el-row :gutter='20' class="order-column">
        <el-col :span="4">
            <p>排序方式</p>
        </el-col>
        <el-col :span="3">
            <p>观看数:
                <i @click="clickOrder2" v-if="orderIcon2=='1'" class="el-icon-caret-top"></i>
                <i @click="clickOrder2" v-else-if="orderIcon2=='-1'" class="el-icon-caret-bottom"></i>
                <i @click="clickOrder3" v-else class="el-icon-d-caret"></i>
            </p>
        </el-col>
        <el-col :span="3">
            <p>收藏数:
                <i @click="clickOrder4" v-if="orderIcon3=='1'" class="el-icon-caret-top"></i>
                <i @click="clickOrder4" v-else-if="orderIcon3=='-1'" class="el-icon-caret-bottom"></i>
                <i @click="clickOrder5" v-else class="el-icon-d-caret"></i>
            </p>
        </el-col>
    </el-row>

</div>

方法

methods: {
    clickOrder: function() {
        this.orderIcon = -this.orderIcon;
    },
    clickOrder2: function() {
        this.orderIcon2 = -this.orderIcon2;
    },
    clickOrder3: function() {
        this.orderIcon2 = '-1';
        this.orderIcon3 = '';
    },
    clickOrder4: function() {
        this.orderIcon3 = -this.orderIcon3;
    },
    clickOrder5: function() {
        this.orderIcon3 = '-1';
        this.orderIcon2 = '';
    },
}