zll-ui
v1.0.0
Published
more new beer
Downloads
1
Readme
安装
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;
},
},
};