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

初始table组件规范

这里我们借助element-ui二次封装，首先在我们项目中安装一下，按照官方文档走就行，具体就不细说了，链接在这里

我们还在还是老样子，先初始化项目，新建文件等系列操作

<template>
    <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"> </el-table-column>
    <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
    <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
</template>
<script>
export default {
    name: "Table",
    data() {
    return {
        tableData: [
        {
            date: "2016-05-02",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
        },
        {
            date: "2016-05-04",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1517 弄",
        },
        {
            date: "2016-05-01",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1519 弄",
        },
        {
            date: "2016-05-03",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1516 弄",
        },
        ],
    };
},
};
</script>

我们可以看出 data 是表格的数据，数据为json对象， label 显示的标题，prop 就是标题对应下的数据，层层对应，数据是循环出来的，有多少条数据就有多少 el-table-column 列，这里我们大概了解一下就行，官方文档都有，我们就是借用一下table组件来进行二次封装

定义数据配置表头

我们不能每次定义表头的数据都重新定义，一直重复操作，我们可以用传参的方式来定义出来，我们先把需要的数据先定义出来

//table
 <a-table :column="column"></a-table>
 //script
     data() {
        return {
            column: [
                {label: "日期", prop: "date"},
                {label: "姓名", prop: "name"},
                {label: "地址", prop: "address"},
            ]
        }
    }

//组件
<template>
    <el-table :data="tableData" style="width: 100%">
    <el-table-column v-for="item in column" :key="item.prop" :prop="item.prop" :label="item.label"></el-table-column>
    </el-table>
</template>
//script
    props: {
        column: {
            type: Array,
            default: () => []
        }
    },

这样我们就可以非常便捷的更改表头了

复选框、索引属性配置

• 复选框 我们先写一下复选框，通过type="selection"就可以显示出来，通过判断 checkbox 是true还是false来控制显隐

<template>
    <el-table :data="tableData" style="width: 100%">
    <el-table-column v-if="checkbox" type="selection" width="40px"></el-table-column>
    <el-table-column v-for="item in column" :key="item.prop" :prop="item.prop" :label="item.label"></el-table-column>
    </el-table>
</template>
//script
    props: {
        column: {
            type: Array,
            default: () => []
        },
        checkbox: {
            type: Boolean,
            default: true
        },
    },

想让他隐藏的话，在组件传一个checkbox值为false就可以

  <a-table :checkbox="false" :column="column"></a-table>

然后我们也可以反过来来操作，先默认false，谁需要传一个true就好，根据工作情况来定

• 索引

索引就是设置一个type="index"，也是和复选框一样，通过判断index的Boolean值来显示，像索引，复选框都放在代码的最上面写

<template>
    <el-table :data="tableData" style="width: 100%">
    <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>
    <el-table-column v-for="item in column" :key="item.prop" :prop="item.prop" :label="item.label"></el-table-column>
    </el-table>
</template>
//script
    props: {
        column: {
            type: Array,
            default: () => []
        },
        checkbox: {
            type: Boolean,
            default: true
        },
        index: Boolean,
    },

<template>
    <a-table index :checkbox="false" :column="column"></a-table>
</template>

附完整代码

<template>
    <a-table index :checkbox="false" :column="column"></a-table>
</template>
<script>
export default {
    name: 'Home',
    components: {
        'a-table': () => import('@/components/table/index')
    },
    data() {
        return {
            column: [
                {label: "日期", prop: "date"},
                {label: "姓名", prop: "name"},
                {label: "地址", prop: "address"},
            ]
        }
    }
}
</script>

<template>
    <el-table :data="tableData" style="width: 100%">
    <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>
    <el-table-column v-for="item in column" :key="item.prop" :prop="item.prop" :label="item.label"></el-table-column>
    </el-table>
</template>
<script>
export default {
    name: "Table",
    props: {
        column: {
            type: Array,
            default: () => []
        },
        checkbox: {
            type: Boolean,
            default: true
        },
        index: Boolean,
    },
    data() {
    return {
        tableData: [
        {
            date: "2016-05-02",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
        },
        {
            date: "2016-05-04",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1517 弄",
        },
        {
            date: "2016-05-01",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1519 弄",
        },
        {
            date: "2016-05-03",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1516 弄",
        },
        ],
    };
},
};
</script>