Vue结合elementUI的一些解决方案

一、一些状态码的显示

1、示例图

 2、解决方案

<el-table-column prop="categoryId" label="商品类别"  align="center">
    <template slot-scope="scope">
        {{getLabel("Category" , scope.row.categoryId)}}
    </template>
</el-table-column>
<el-table-column prop="brandId" label="品牌类别"  align="center">
    <template slot-scope="scope">
        {{getLabel("Brand" , scope.row.brandId)}}
    </template>
</el-table-column>


<script>
    export default {
        data() {
            return {
                brands:[],
                categorys:[],
            }
        }
        methods: {
        /** 获取品牌/类别的值 */
        getLabel(type , value){
            if (value !== '' && type==="Category" ){
                return this.categorys.find(item => item.id === value)!=null ? this.categorys.find(item => item.id === value).categoryName:"其他类别";
            }else if(value !== '' && type==="Brand"){
                return this.brands.find(item => item.id === value)!=null ? this.brands.find(item => item.id === value).brandName:"其他品牌";
            }else {
                //TODO
            }
        },
    }
</script>

3、成功解决

二、 前端字段展示排序

1、示例图

2、解决方案

加上【sortable】属性

<el-table-column label="创建时间" align="center" prop="createTime" width="180" sortable>
    <template slot-scope="scope">
        <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
    </template>
</el-table-column>

三、表格奇数偶数行不同颜色展示

1、示例图

2、 解决方案

<el-table v-loading="loading" :data="goodsList" :row-class-name="tableRowClassName">
    ... ...
</el-table >


<style>
    .el-table .even-row {
      background: #DCDCDC;
    }
</style>


<script>
    export default {
        data() {
            return {}
        }
        methods: {
        /** 不同行显示不同颜色 */
        tableRowClassName({row, rowIndex}) {
          if (rowIndex %2 === 0) {
            return 'odd-row';
          } else if (rowIndex %2 === 1) {
            return 'even-row';
          }
          return '';
        },
    }
</script>

四、深拷贝的方法

深拷贝：拷贝的是对象或者数组内部数据的实体，重新开辟了内存空间存储数据；

浅拷贝：拷贝的是引用类型的指针，副本和原数组或对象指向同一个内存；

1、通过递归方式实现深拷贝
比较全面的深拷贝，缺点是较为繁琐

function deepClone(obj) {
    var target = {};
    for (var key in obj) {
        if (Object.prototype.hasOwnProperty.call(obj, key)) {
            if (typeof obj[key] === 'object') {
                target[key] = deepClone(obj[key]);
            } else {
                target[key] = obj[key];
            }
        }
    }
    return target;
}

2、JSON.parse(JSON.stringify(obj))
满足一般使用场景，但无法实现对象中方法(fountion)的深拷贝

let obj = {
    id: 1,
    name: '张三',
    age: 10,
}
let newObj = JSON.parse(JSON.stringify(obj))

3、jQuery的extend方法实现深拷贝
 

var array = [1,2,3,4];
var newArray = $.extend(true,[],array); // true为深拷贝，false为浅拷贝