zll-ui v1.0.0

安装

cnpm i zll-ui -S

使用

在src/main.js
import zll from 'zll-ui';
Vue.use(zll);

组件

按钮

 <zll-button content="主要按钮" type="primary"></zll-button>
 <zll-button content="信息按钮" type="info"></zll-button>
 <zll-button content="默认按钮" type="default"></zll-button>
 <zll-button content="警告按钮" type="warning"></zll-button>
 <zll-button content="危险按钮" type="danger"></zll-button>

分页

 <zll-page
   :total="10"
   @changepage="changePageFn"
   :pagesize="2"
   :pagenum="pagenum"
 ></zll-page>

表格

  <zll-table :columns="userColumns" :datas="userDatas"></zll-table>
 <br />
 <br />
 <zll-table :columns="goodsColumns" :datas="goodsDatas"></zll-table>
 export default {
 data() {
   return {
     pagenum: 2,
     userColumns: [
       { title: "编号", key: "id" },
       { title: "姓名", key: "name" },
       { title: "性别", key: "sex" },
       {
         title: "性别2",
         key: "sex2",
         render: (row) =>
           `<b style="color:red">${row.sex2 == 1 ? "男" : "女"}</b>`,
       },
     ],
     userDatas: [
       { id: 1, name: "张翼", sex: "男", sex2: 1 },
       { id: 2, name: "梨儿", sex: "女", sex2: 2 },
       { id: 3, name: "孙三", sex: "男", sex2: 1 },
       { id: 4, name: "王思", sex: "女", sex2: 2 },
     ],
     goodsColumns: [
       { title: "编号", key: "id" },
       { title: "商品", key: "name" },
       { title: "数量", key: "number" },
       { title: "价格", key: "price" },
     ],
     goodsDatas: [
       { id: 1, name: "草莓", number: 5, price: "10.5" },
       { id: 2, name: "苹果", number: 15, price: "1.5" },
       { id: 3, name: "西瓜", number: 3, price: "10" },
       { id: 4, name: "橘子", number: 2, price: "5" },
       { id: 5, name: "橙子", number: 25, price: "3.5" },
       { id: 6, name: "香蕉", number: 8, price: "1" },
       { id: 7, name: "榴莲", number: 9, price: "54.5" },
     ],
   };
 },
 methods: {
   changePageFn(num) {
     console.log("请求接口:", num);
     this.pagenum = num;
   },
 },
};