1.0.8 • Published 4 years ago
yirenck-ui v1.0.8
npm安装
npm install yirenck-ui element-ui -S
主要功能
- table表格
- dialog弹窗
官网
Author
Brand
在main.js引入elementui和yirenckui
// 引入elementui
import Element from 'element-ui'
Vue.use(Element)
// 引入yirenck-ui
import yirenck from 'yirenck-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(yirenck)
由于时间关系API文档暂未撰写,功能还在开发中,官网正在建设,后期会逐步更新
Demo
<template>
<el-card>
<ck-table
:data="tableData.data"
border
pagination
:column="tableData.column"
@size-change="handleSizeChange"
@ck-current-change="handleCurrentChange"
index
:current-page="1"
:page-sizes="[10, 20, 30, 50]"
:page-size="10"
layout="total, sizes, prev, pager, next, jumper"
:total="400"
></ck-table>
<ck-dialog
title="修改"
:showHide.sync="editDialog"
width="30%"
:data="dialogData.data"
:formItem="dialogData.form"
:button="dialogData.editButton"
></ck-dialog>
<ck-dialog
title="详情"
:showHide.sync="detailDialog"
width="30%"
:data="dialogData.data"
:formItem="dialogData.form"
:button="dialogData.detailButton"
disabled
></ck-dialog>
</el-card>
</template>
<script>
export default {
data() {
return {
// 弹窗显示隐藏
editDialog: false,
detailDialog: false,
// 表格数据对象
tableData: {
data: [
{
id:1,
date: "2016-05-02",
name: "王小虎1",
system:null,
op: true,
address: "上海市普陀区金沙江路 1518 弄"
},
{
date: "2016-05-04",
name: "王小虎2",
system:1,
op: false,
address: "上海市普陀区金沙江路 1517 弄"
},
{
date: "2016-05-01",
name: "王小虎3",
system:1,
op: true,
address: "上海市普陀区金沙江路 1519 弄"
},
{
date: "2016-05-03",
name: "王小虎4",
system:1,
op:false,
address: "上海市普陀区金沙江路 1516 弄"
}
],
column: [
{
tag: "name",
label: "姓名",
width: 150 // 宽度
},
{
prop: "address",
label: "地址",
showOverflowTooltip: true // 内容过长是否隐藏
},
{
switch: "op",
label: "态址",
showOverflowTooltip: true // 内容过长是否隐藏
},
{
prop: "system",
label: "系统",
options:[{
value: 1,
label: '前台'
}, {
value: 2,
label: '后台'
}]
},
{
label: "操作",
width: 210,
button: [
{
label: "修改",
click: row => {
this.editDialog = true;
console.log(row)
this.dialogData.data = row;
}
},
{
label: "详情",
click: row => {
console.log("详情", row);
this.dialogData.data = row;
this.detailDialog = true;
}
},
{
label: "删除",
click: row => {
console.log("删除", row);
}
}
]
}
]
},
dialogData: {
data: {},
form: [
{
prop: "name",
label: "姓名",
showWordLimit: true,
size: "mini"
},
{
prop: "address",
label: "地址"
},
{
switch: "op",
label: "状态"
},
{
select:"system",
label: "系统",
filterable:true,
options:[{
value: 1,
label: '前台'
}, {
value: 2,
label: '后台'
}]
}
],
editButton: [
{
label: "确认",
type: "primary", // 按钮类型 默认为mini
click: row => {
console.log("确认", row);
this.editDialog = false;
}
},
{
label: "取消"
}
],
detailButton: [
{
label: "关闭"
}
]
}
};
},
methods: {
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
}
}
};
</script>
浏览器支持
Modern browsers and Internet Explorer 10+.