1.3.6 • Published 2 years ago
cf-components-ui v1.3.6
cf-components-ui
description
This project is based on an element-Plus packaged component library.
Project setup
main.js:
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import CfComponentsUi from 'cf-components-ui'
createApp(App).use(ElementPlus).use(CfComponentsUi).mount('#app')
components:
cf-popup
$ElMessage
cf-pagination
<template>
<cf-pagination :total="total" :pageNum="pageNum" :pageSize="pageSize" @pageChange="pageChange"/>
</template>
<script>
export default {
name: "demo",
data() {
return {
pageSize: 10,
pageNum: 1,
total: 100
};
},
mounted() {
},
methods: {
pageChange(page) {
this.pageSize = page._pageSize;
this.pageNum = page._currentPage;
},
},
};
</script>
cf-button
<template>
<cf-button :auto-loading="true" @btnClick="submit">
自动loading按钮
</cf-button>
</template>
<script>
export default {
methods: {
submit(done) {
setTimeout(() => {
done()
}, 1000)
}
}
}
</script>
cf-table
<template>
<cf-table
:tableData="tableData"
:columns="columns"
:loading="loading"
:pageObj="pageObj"
:isShowCheckbox="true"
@handle-selection-change="handleSelectionChange"
@pageChange="pageChange"
>
<template #operate>
<el-table-column label="操作" align="center" fixed="right" width="300">
<template #default="scope">
<el-button size="small" type="warning" @click="edit(scope.row)"
>编辑
</el-button>
<el-button size="small" type="primary" @click="startUsing(scope.row)"
>启用
</el-button>
</template>
</el-table-column>
</template>
</cf-table>
</template>
<script>
export default {
name: "demo",
data() {
return {
tableData: [],
columns: [
{ label: "名称", prop: "adName" },
{ label: "链接", prop: "adUrl" },
{ label: "排序", prop: "sort" },
{ slot: "operate" },
],
loading: true,
pageObj: {
size: 10,
total: 100,
currentPage: 1
},
};
},
mounted() {
this.getData();
},
methods: {
pageChange(val){
console.log(val);
},
edit(row) {
console.log(row);
},
handleSelectionChange(val) {
console.log(val);
},
getData() {
setTimeout(() => {
this.tableData = [
{
date: "2016-05-02",
adName: "王小虎",
adUrl: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-04",
adName: "王小虎",
adUrl: "上海市普陀区金沙江路 1517 弄",
},
{
date: "2016-05-01",
adName: "王小虎",
adUrl: "上海市普陀区金沙江路 1519 弄",
},
{
date: "2016-05-03",
adName: "王小虎",
adUrl: "上海市普陀区金沙江路 1516 弄",
},
];
this.loading = false;
}, 1000);
},
},
};
</script>
Customize configuration
1.3.6
2 years ago
1.3.5
2 years ago
1.3.3
2 years ago
1.3.2
2 years ago
1.3.1
2 years ago
1.3.0
2 years ago
1.2.37
2 years ago
1.2.36
2 years ago
1.2.35
2 years ago
1.2.33
2 years ago
1.2.32
2 years ago
1.2.31
2 years ago
1.2.30
2 years ago
1.2.29
2 years ago
1.2.28
2 years ago
1.2.27
2 years ago
1.2.26
2 years ago
1.2.25
2 years ago
1.2.23
2 years ago
1.2.22
2 years ago
1.2.21
2 years ago
1.2.2
2 years ago
1.2.1
2 years ago
1.1.9
2 years ago
1.1.8
2 years ago
1.1.7
2 years ago
1.1.6
2 years ago
1.1.5
2 years ago
1.1.3
2 years ago
1.1.2
2 years ago
1.1.1
2 years ago
1.1.0
2 years ago
1.0.5
2 years ago
1.0.3
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago
0.9.9
2 years ago
0.9.8
2 years ago
0.9.7
2 years ago
0.9.6
2 years ago
0.9.5
2 years ago
0.9.3
2 years ago
0.9.2
2 years ago
0.9.1
2 years ago
0.9.0
2 years ago
0.8.0
2 years ago
0.7.0
2 years ago
0.5.0
2 years ago
0.4.0
2 years ago
0.3.0
2 years ago
0.2.0
2 years ago
0.1.0
2 years ago