vue | element ui | table 每行动态绑定加载禁用样式

拼接形成的字符串转换成变量使用

var a = "hello";
var b = a+ "word";
var c = eval(b);
此时的c就可以当变量使用
比如：this.c = "0";


我是在vue中 :loading="eval(VExportLoading+scope.$index)" 使用
这样会报错

// 自己模拟一个eval方法 
evil (fn) { 
    let Fn = Function // 一个变量指向Function，防止有些前端编译工具报错 
    return new Fn('return ' + fn)() 
}
this.evil(this.sevenDateValueList.join('+'))

还是报错 ,可能是因为我在绑定的地方使用this.eval,报不是函数

let code = `function code(){
               return 'code'
           }`
let fun = new Function(`return ${code}`)();
console.log(fun);

折腾半天,终于解决了: 想在绑定的属性上用变量,可以用折中做法

<un-table-column label="操作">
    <template slot-scope="scope">
        <!--关键代码-->
        <un-button :loading="LoadList['loading'+scope.$index]"
                   :disabled="LoadList['disabled'+scope.$index]"
                    @click="export(scope.row.type,scope.$index)"
        >导出</un-button>
    </template>
</un-table-column>

data() {
    return {
        <!--关键代码-->
        LoadList: {
            loading0: false,
            loading1: false,
            diable0: false,
            diable1: false,
        }
    }
},
methods: {
    export(type,index) {
        <!--关键代码-->
        this.LoadList["loading"+index]=true
        this.LoadList["diable"+index]=true

        let params = {
            type: type
        }
        let config= {
            responseType: "blob"
        }
        tonna.post("/xx/export",params,config) 
        .then(res=>{
            // 成功调用下载excel函数
            this.callackDownload(res)
            this.LoadList["loading"+index]=false
            this.LoadList["diable"+index]=false
        })
        .catch(error=>{
            // 错误提示等
            this.LoadList["loading"+index]=false
            this.LoadList["diable"+index]=false
        })
    },    
    callackDownload(res) {
        let filename = decodeURI(res.headers["content-disposition"].split("filename=")[1])
        var fileData = new Blob([res.data],{
            type: "muiltipart/form-data"
        })
        if (window.navigator.msSaveOrOpenBlob) {
            window.navigator.msSaveOrOpenBlob(fileData,fileName); // msSaveOrOpenBlob兼容IE10的模式
        } else {
            var a = document.createElement("a")
            a.style="display:none"
            var url = window.URL.createObjectURL(fileData);
            a.href=url
            a.download=fileName
            document.body.appendChild(a)   
            a.click()
            document.body.removeChild(a)
        }        
    }
}

注意文中关键代码即可

补充excel导出代码后台代码

@PostMapping("/xx/export")
public void export(HttpServletRequest req,HttpServletResponse resp,@RequestParam("type")String type) {
    resp.setContentType("application.vds.ms-excel");
resp.setCharacterEncoding("utf-8");
String fileName = URLEncoding.encode("报表导出","utf-8");
response.setHeader("Content-disposition","attachment;filename="+fileName+".xlsx");
// 数据
// easyExcel.write
}

更新 2020-06-18

又有这个需求了,这次行不确定,需要将上面的程序改进一下。

关键代码,具体参考上面详细的

# template
<un-button :loading="obj['loading'+scope.$index]"
           :disabled="obj['disabled'+scope.$index]"
            @click="export(scope.row.type,scope.$index)"
>导出</un-button>

# 大体思路: 监听table数据,得到动态数据的行,创建动态对象即可
data() {
    return {
        obj: {}
    }
},
watch: {
    tableData(val) {
        for(var i=0;i<val.length;i++) {
            this.$set(this.obj,"loading"+i,false); 
            this.$set(this.obj,"loading"+i,false);   // 为什么这里不直接给obj赋值,移步:vue->$set的特性
        }
    }
}
# 接下来的操作,如同上诉,主要是优化了动态生成这一步.而不是写死的。