vue排序

<template>
    <div>
        <el-form :model="ruleForm" :rules="rules"  label-width="100px" class="demo-ruleForm">
            <el-form-item label="活动名称" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="活动区域" prop="region">
                <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="活动时间" required>
                <el-col :span="11">
                    <el-form-item prop="date1">
                        <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col class="line" :span="2">-</el-col>
                <el-col :span="11">
                    <el-form-item prop="date2">
                        <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
                    </el-form-item>
                </el-col>
            </el-form-item>
            <el-form-item label="即时配送" prop="delivery">
                <el-switch v-model="ruleForm.delivery"></el-switch>
            </el-form-item>
            <el-form-item label="活动性质" prop="type">
                <el-checkbox-group v-model="ruleForm.type">
                    <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
                    <el-checkbox label="地推活动" name="type"></el-checkbox>
                    <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                    <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="特殊资源" prop="resource">
                <el-radio-group v-model="ruleForm.resource">
                    <el-radio label="线上品牌商赞助"></el-radio>
                    <el-radio label="线下场地免费"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="活动形式" prop="desc">
                <el-input type="textarea" v-model="ruleForm.desc"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
        <!---->
        <el-table
                ref="tableData"
                id="table"
                :data="tableData"
                style="width: 100%"
                :row-class-name="tableRowClassName">
                <!--:default-sort ="{prop:'index',order:'descending'}"-->


            <el-table-column   prop="index" label="index" width="180">
            </el-table-column>
            <el-table-column prop="date" label="Date" width="180"  />
            <el-table-column prop="name" label="Name" width="180" />
            <el-table-column prop="address" label="Address" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button
                            size="mini"
                            type="danger"
                            @click.native.prevent="deleteRow(scope.row.index, tableData)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<style type="scss" scoped>
    /deep/ .el-table .warning-row {
        background: oldlace;
    }

    /deep/ .el-table .success-row {
        background: #f0f9eb;
    }
</style>

<script>
    export default {
        data() {
            return {
                ruleForm: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                rules: {
                    name: [
                        { required: true, message: '请输入活动名称', trigger: 'blur' },
                        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ],
                    region: [
                        { required: true, message: '请选择活动区域', trigger: 'change' }
                    ],
                    date1: [
                        { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                    ],
                    date2: [
                        { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
                    ],
                    type: [
                        { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
                    ],
                    resource: [
                        { required: true, message: '请选择活动资源', trigger: 'change' }
                    ],
                    desc: [
                        { required: true, message: '请填写活动形式', trigger: 'blur' }
                    ]
                },
                tableData: [{
                    index:1,
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄',
                }, {
                    index:2,
                    date: '2016-05-04',
                    name: '王小2',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    index:3,
                    date: '2016-05-01',
                    name: '王小3',
                    address: '上海市普陀区金沙江路 1518 弄',
                }, {
                    index:4,
                    date: '2016-05-03',
                    name: '王小4',
                    address: '上海市普陀区金沙江路 1518 弄'
                }],
                // loading: true,
            }
        },
        created(){

        },
        mounted(){
            this.getData();
            this.sort();
        },
        methods: {
            tableRowClassName({row, rowIndex}) {
                if (rowIndex == '1') {
                    return 'warning-row';
                } else if (rowIndex == '3') {
                    return 'success-row';
                }
                return '';
            },
            //删除后，倒序
            deleteRow(index, rows) {
                //alert(index)
                let j = rows.length;
                rows.splice(index-1, 1);
                for(let i = 0; i< j+1;i++){
                    rows[i].index  = i+1;
                }
                this.sort();
            },
            getLoding(parameter){
                const loading = this.$loading({
                    lock: true,//lock的修改符--默认是false
                    text: 'Loading',//显示在加载图标下方的加载文案
                    spinner: 'el-icon-loading',//自定义加载图标类名
                    background: 'rgba(0, 0, 0, 0.7)',//遮罩层颜色
                    target: parameter//loadin覆盖的dom元素节点
                });
                //成功回调函数停止加载
                 loading.close()
            },
            getData(){
                let dom = document.getElementsByTagName('tbody')[0].childNodes;
                let arr = [];
                let length = dom.length;
                for(var i = 0;i<length;i++){
                    arr.push(dom[i])
                }
                for(var i=0;i<arr.length;i++){
                            if(arr[i].nodeName == '#text'){
                                arr.splice(i,1);
                            }
                }
                for(var i=0;i<arr.length;i++){
                    this.getLoding(arr[i])
                }

            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            //排序方法
            sort(){
               // alert('1')
                this.$refs.tableData.sort("index","descending")
            }
        },
    }
</script>