table组件封装 入门学习(完结)-14

春风吹又生1127
114 阅读1分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第14天，点击查看活动详情

动态组件 组件生成

当我们需要一个function，image的时候就需要用一个if分别去判断，新加一个就得重新去判断，有点繁琐，这下我们使用自动化工程，让组件自动帮我们生成 首先我们在vue的目录下，components下新建一个control的文件夹，将我们需要的一个个拆分到这里，比如下面这个图片，需要什么加就行了

343c454b6e71017e27f5f49d5c222f3.png

这里我们新建的function的文件夹与我们自定义function是一样的

    column: [
        { 
            type: 'function',
            label: "URL地址",
            prop: "date" 
        },
      ],

利用node.js的require.context的去读取文件夹的内容， 传3个参数，第一个为文件夹的地址，第二个是一个开关(true和false)，第三个就是指定文件的后缀，

620484ff12a54565579f5578f6d9c15.png

const files = require.context('../control',true, /\index.vue$/)
console.log(files);

bec81e1e96388bd0daee8515175919d.png

cb24e3c5b789641d9a2dec20847da5c.png

我们可以看到我们新建文件夹里面的文件都可以读取到，可以到到这是一个对象，我们使用 keys弄一个数组迭代对象，将对象中的./function/index.vue从对象中拿出来

const files = require.context('../control',true, /\index.vue$/)
console.log(files);
files.keys().forEach(item => {
    console.log(item);
});

6a2e85e4bacfc73884a6258c4f2b66c.png

我们可以看到是字符串，通过split切割成数组

 const  key = item.split("/")
    console.log(key);

620484ff12a54565579f5578f6d9c15.png

这时候我们就可以获取到一开始定义的文件名了

 const name = key[1]

我们的目的就是把组件格式化成这个样子

components: {
    'com-function': () => import("../control/function"),
    'com-image':() => import("../control/image")
},

const modules = {}
const files = require.context('../control',true, /\index.vue$/)
files.keys().forEach(item => {
    const  key = item.split("/")
    const name = key[1]
    //组合集成
    modules[`com-${name}`] = files(item).default
});
    console.log(modules);

b6bd3c7813909360c4630a1bf57662e.png

这时候我们目的就达成了，最后我们就需要...modules就ok了，然后就可以新建多少都自动去读取了

components: {
    ...modules
},

附完整代码

<template>
    <el-table 
    :data="tableData" 
    style="width: 100%"
    @selection-change="handleSelectionChange"
    @sort-change="sortChange"
    >
    
    <el-table-column v-if="index" type="index" width="40px"></el-table-column>
    <el-table-column v-if="checkbox" type="selection" width="40px"></el-table-column>
    
    <template v-for="item in column">
    <el-table-column :sort-by="item.sort_by" v-if="item.type === 'function'" :key="item.prop" :prop="item.prop" :label="item.label">
        <template slot-scope="{row}">
            <div v-html="item.callback && item.callback(row)"></div>
        </template>
    </el-table-column>
    <el-table-column v-if="item.type === 'slot'" :key="item.prop" :prop="item.prop" :label="item.label">
        <template slot-scope="{row}">
            <slot :name="item.slot_name" :data="row"></slot>
        </template>
    </el-table-column>
    <el-table-column :sort-by="item.sort_by" :sortable="item.sort" v-else :key="item.prop" :prop="item.prop" :label="item.label"></el-table-column>

    </template>
    </el-table>
</template>
<script>
const modules = {}
const files = require.context('../control',true, /\index.vue$/)
files.keys().forEach(item => {
    const  key = item.split("/")
    const name = key[1]
    //组合集成
    modules[`com-${name}`] = files(item).default
});
export default {
    name: "Table",
    props: {
        checkList: {
            type:Array,
            default: () => []
        },
        column: {
            type: Array,
            default: () => []
        },
        checkbox: {
            type: Boolean,
            default: true
        },
        initRequest: {
            type: Boolean,
            default: true
        },
        url:{
            type: String,
            default: "",
            require: true
        },
        method: {
            type: String,
            default: "post",
            require: true
        },
        data: {
            type: Object,
            default: () => {}
        },
        params: {
            type: Object,
            default: () => {}
        },
        format: Function,
        index: Boolean,
        onLoad: Boolean,//默认是fasle
    },
    data() {
    return {
        tableData: [
        {
            date: "2016-05-02",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
            id: 20
        },
        {
            date: "2016-05-04",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1517 弄",
        },
        {
            date: "2016-05-01",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1519 弄",
        },
        {
            date: "2016-05-03",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1516 弄",
        },
        ],
    };
},
components: {
    ...modules
},
    beforeMount() {
        this.initRequest && this.getTableList()
    },
    methods: {
        getTableList() {
            const url = this.url
            if(!url) {
                console.log("请求地址不存在");
                return false
            }
            const request_data = {
                url: this.url,
                method: this.method
            }
            if(JSON.stringify(this.data) != '{}') {
                request_data.data = this.data
            }
            if(JSON.stringify(this.params) != '{}') {
                request_data.params = this.params
            }
            
            this.$axios({request_data}).then((Response => {
                let request_data = Response.data
                if(this.format && typeof this.format=== 'function') {
                    request_data = this.format(Response.data)                  
                }
                this.tableData = request_data             
                   //回调数据
                this.onLoad && this.$emit("onload",Response.data) 

                }))
        },
        handlerRequest() {
            this.getTableList()
        },
        handleSelectionChange(val) {
            this.$emit("update:checkList",val)
        },
        sortChange({column, prop, order}) {
            const sort_by = column.sortBy
            console.log(sort_by,order);
        }
    }
};
</script>
avatar
文章
阅读
粉丝