admin-element-vuejs.v1

# ScreenTable

# 简介

此组件是结合 Layout/Index 布局，考虑到部分用户习惯，查看Demo (opens new window)调整浏览器高度观察效果, 它基于element-ui的 table 组件实现，通过el-table，并且利用 vue 插槽的特性来方便用户自定义。

# Props 说明

与 element-ui的 table 组件 Props 一致，不过只用一部分其他的都未定义，你可以根据自己需求进行调整，@/components/ScreenTable (opens new window)。

详细说明：element-ui > table 文档 (opens new window)

# 代码示例

<screen-table
    class="screen-conent"
    table-class="custom-table"
    header-row-class-name="custom-table-header"
    :data="tableData">
        <el-table-column
            fixed
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            fixed
            prop="date"
            label="日期"
            width="150">
        </el-table-column>
        <el-table-column
            prop="name"
            label="姓名"
            min-width="120">
        </el-table-column>
        <el-table-column
            prop="province"
            label="省份"
            min-width="120">
        </el-table-column>
        <el-table-column
            prop="city"
            label="市区"
            min-width="120">
        </el-table-column>
        <el-table-column
            prop="address"
            label="地址"
            min-width="300">
        </el-table-column>
        <el-table-column
            prop="zip"
            label="邮编"
            min-width="120">
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="100">
            <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text">查看</el-button>
                <el-dropdown class="margin-l5">
                    <span class="cursor-pointer">
                        <el-button type="text" >更多<i class="el-icon-arrow-down el-icon--right"></i></el-button>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="tableEdit(scope.row)">编辑</el-dropdown-item>
                        <el-dropdown-item @click.native="tableDel(scope.row)">删除</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </template>
        </el-table-column>
</screen-table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

详细示例 Demo (opens new window)

← Svgo →