曹伟封装的table ui组件

cw-table-ui

安装

npm install cw-table-ui

使用

main.js中引入 import cwTable from "cw-table-ui"; import cwTableColumn from "cw-table-ui"; vue.use(cwTableColumn) vue.use(cwTable)

示例

主要封装了一些公司项目中一些通用的功能，加快开发

<cw-table :data="resultList" checkField="urlhash" ref="cwTable" showScrollBtn :loading="loading" @selection-change="selectionChange"
    @sort-change="onSortChange" v-loading="loading">
    <cw-table-column type="selection" fixed width="40">
    </cw-table-column>
    <cw-table-column type="index" label="序号" width="60">
    </cw-table-column>
    <cw-table-column prop="accountName" label="网站/公众号" width="200"></cw-table-column>
    <cw-table-column prop="url" label="链接" width="200"></cw-table-column>
    <cw-table-column prop="deadlineTime" label="截止时间" width="200"></cw-table-column>
    <cw-table-column label="操作" fixed="right">
        <template slot-scope="scope">
            <span class="operate edit" title="编辑" @click="handleEdit(scope.row)"></span>
            <el-popover placement="bottom" title="提示" trigger="click" v-model="scope.row.visible">
                <div style="text-align: right; margin: 0">
                    <p>确认删除并屏蔽账号？</p>
                    <el-button size="mini" type="text" @click="scope.row.visible = false">取消</el-button>
                    <el-button type="primary" size="mini" @click="accountDelete(scope.row.id)"
                        v-loading="batchDeleteLoading">确定</el-button>
                </div>
                <span slot="reference" class="operate delete" title="删除并屏蔽账号"
                    @click="handleDelete(scope.row)"></span>
            </el-popover
        </template>
    </cw-table-column>
</cw-table>

效果

类似于饿了么ui的table，又添加了一些独有的功能如：
一、fixed：固定列（默认固定在左侧）， fixed="right" 固定在右侧

二、showScrollBtn：当列表宽度过宽出现滚动条，则会出现左切 右切按钮

三、checkField="urlhash"：当列的type="selection"时，默认勾选选的是id，但如果想选别的列，则可以手动指定选择的列，非常有用

待补充......