open-rubbish-ui v1.0.2

说明

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

安装

cnpm i open-rubbish-ui -S

使用

在src/main.js

import rubbish from 'open-rubbish-ui';
import 'open-rubbish-ui/qf-ui.css';

Vue.use(rubbish);

组件

框

    <qf-name-frame title="只是一个框罢了">可以填写内容</qf-name-frame>
    props: title  string

表格

<qf-table :columns="columns" :table-data="tableData"></qf-table>
<script>
export default {
  data() {
    return {
      columns: [
        { title: '日期', key: 'date' },
        { title: '姓名', key: 'name' },
        { title: '地址', key: 'address' },
        { title: '性别', key: 'sex', render: (row) => `<b>${row.sex === 1 ? '男' : '女'}</b>`},
        { title: '性别', key: 'sex2' },
      ],
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          sex: 1,
          sex2: '男',
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
          sex: 0,
          sex2: '男',
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          sex: 1,
          sex2: '男',
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
          sex: 0,
          sex2: '男',
        },
      ],
    }
  },
},
}
</script>

分页

<qf-page :total="100"></qf-page>


props: {
  // 每页显示数量
  pagesize: {
    type: Number,
    default: 10,
  },
  // 总数
  total: {
    type: Number,
    required: true,
  },
  // 分页显示数
  list: {
    type: Number,
    default: 5,
  },
},