element-ui-pro

基于 ElementUI/Vue@2 的高阶UI控件

ProTable

• 兼容 el-table, 可直接替换
• 支持动态列
• 支持自定义模板
• 支持多级表头

用例：

<Pro-Table :data="[
        { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }
        { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }
        { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }
        { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }
        { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }
        { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }
    ]" 
    :col-models=" [
        { id: 4, prop: 'date', label: '日期', width: '100', align: 'center',slotName:'col1' },
        { id: 1, prop: 'name', label: '姓名', width: '100', align: 'center' },
        { id: 11, pid: 1, prop: 'name', label: '姓名', width: '100', align: 'center' },
        { id: 12, pid: 1, prop: 'name', label: '姓名', width: '100', align: 'center' },
        { id: 13, pid: 1, prop: 'name', label: '姓名', width: '100', align: 'center' },
        { id: 131, pid: 13, prop: 'name', label: '姓名', width: '100', align: 'center' },
        { id: 132, pid: 13, prop: 'name', label: '姓名', width: '100', align: 'center' },
        { id: 2, prop: 'date', label: '日期', width: '100', align: 'center' },
        { id: 3, prop: 'address', label: '地址', align: 'center' },
        { id: 5, prop: 'address', label: '操作', align: 'center',slotName:'action' }
    ]" simple-tree 
    border 
    style="width: 100%;"
    height="100%">
    <el-table-column label="序号" width="50" type="index"></el-table-column>

    <!-- 自定义模板：slotName='col1' 的列 -->
    <template #col1="{ row }">
        <el-tag>{{ row.date }}</el-tag>
    </template>
    
    <!-- 自定义模板：slotName='action' 的列 -->
    <template #action="{ row }">
        <el-button @click="handleEdit(row)">编辑</el-button>
    </template>
    
    <!-- 自定义模板：所有 prop='name' 的列 -->
    <template #name="{ row }">
        姓名：{{row.name}}
    </template>
</Pro-Table>

效果：