十三、Vue业务开发-分层

一、举例：

iview中的组件table 表头数据处理（columns中的render）

一、数据层：presenter.js

const presenter = {
	commonFreightColumns: [
        {
            title: "序号",
            type: "index",
            width: 60,
            align: "center",
        },
        {
            title: "首件数",
            key: "firstWeight",
            render(h, params) {
                return this.renderInput(h, params, "common");
            }
        },
        {
            title: "首运费",
            key: "firstFee",
            render(h, params) { return this.renderInput(h, params, "common") },
        },
        {
            title: "续件数",
            key: "additionalWeight",
            render(h, params) { return this.renderInput(h, params, "common") },
        },
        {
            title: "续运费",
            key: "additionalFee",
            render(h, params) { return this.renderInput(h, params, "common") },
        },
        {
            title: "满件包邮",
            key: "freeShipping",
            render(h, params) { return this.renderInput(h, params, "common") },
        },
        {
            title: "状态",
            key: "state",
            align: "center",
            render(h, params) {
                const state = this.commonFreightData[0].state;
                return h(
                    "span",
                    {
                        style: {
                            color: state ? "#19be6b" : "#ed4014",
                        },
                    },
                    state ? "已启用" : "已停用"
                );
            },
        },
        {
            title: "操作",
            render(h, params) { return this.renderA(h, params) },
            width: 140,
            align: "center",
        },
    ],
}
export default presenter

二、交互层：index.vue

<script>
import presenter from "./presenter";
export default {
    data() {
        return { ...presenter };
    },
    created(){
        this.renderBindthis(this.commonFreightColumns);
    },
    methods: {
        // 批量操作
        renderBindthis(list){
            list.forEach(item=>{
                if(item.render) item.render = this.wrapFn(item.render);
            })
        },
        
        // 为render绑定this
        wrapFn(fn){
            if(typeof fn !== 'function') return fn;
            return (...args)=>{
                fn.apply(this, args);
            }
        },
    }
 }
</script>

二、注意点

方法一 使用 fn.apply(this, args); 则presenter中的 render 不用箭头函数，其中this可用。

方法二 使用 fn(...arguments, self); 使用arguments, 柯里化 this 作为第三个参数传入。

wrapFn 不能是 箭头函数，presenter可以是箭头函数，里面不用this 而是用第三个参数 self做vue实例拿到