workTest

new 杨海波

已于 2022-04-15 00:07:04 修改

阅读量139

点赞数

分类专栏： vue 文章标签： java

于 2022-04-14 23:59:25 首次发布

本文链接：https://blog.csdn.net/bakelFF/article/details/124185092

版权

vue 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

<template>
    <div>
        <el-table
                id="table"
                :data="tableData"
                style="width: 100%"
                :row-class-name="tableRowClassName"
                :default-sort ="{prop:'index',order:'descending'}"
        >
            <el-table-column  type="index" prop="index" label="index" width="180" v-model=tableData.index>
            </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.$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 {
                tableData: [{
                    index:'',
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄',
                }, {
                    index:'',
                    date: '2016-05-04',
                    name: '王小2',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    index:'',
                    date: '2016-05-01',
                    name: '王小3',
                    address: '上海市普陀区金沙江路 1518 弄',
                }, {
                    index:'',
                    date: '2016-05-03',
                    name: '王小4',
                    address: '上海市普陀区金沙江路 1518 弄'
                }],
                // loading: true,
            }
        },
        created(){

        },
        mounted(){
            this.getData();
        },
        methods: {
            tableRowClassName({row, rowIndex}) {
                if (rowIndex == '1') {
                    return 'warning-row';
                } else if (rowIndex == '3') {
                    return 'success-row';
                }
                return '';
            },
            deleteRow(index, rows) {
                rows.splice(index, 1);
            },
            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])
                }

            },
        },
    }
</script>