dxy-ui

说明

WOF-UI 是一款基于 Vue.js 2.0 的前端 UI 组件库，主要用于快速开发 PC 网站中后台产品

安装

cnpm i dxy-ui -S

使用

在 src/main.js import WOFUI from 'dxy-ui'; Vue.use(WOFUI); import 'dxy-ui/wof-ui.css';

组件

表格

<dxyui-table :columns="usersColumns" :tabledata="usersTableData"></dxyui-table>

<script>
export default {
    data() {
        return {
            // 表格
            usersColumns: [
                { title: '编号', key: 'id' },
                { title: '姓名', key: 'uname' },
                { title: '性别', key: 'sex' },
                {
                    title: '性别', key: 'sex1',
                    render: (row) => {
                        return `<b>${row.sex1 == 1 ? "男" : "女"}</b>`
                    }
                }
            ],
            usersTableData: [
                { id: 1, uname: '孙悟空', sex: '男', sex1: 1 },
                { id: 2, uname: '猪八戒', sex: '女', sex1: 0 },
                { id: 3, uname: '沙和尚', sex: '男', sex1: 1 },
            ],
        }
    },
}
</script>

分页

<f-page :total="total" :pagesize="pagesize" :pagenum.sync="pagenum"></f-page>

<script>
export default {
    data() {
        return{
            // 分页
            total: 16,
            pagesize: 3,
            pagenum: 4,
        }
    },
        watch: {
            pagenum(newData, oldData) {
                console.log('这是第' + newData + '页')
            }
        }
}
</script>