vue-cli init
This commit is contained in:
+13
-37
@@ -1,49 +1,25 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<image class="logo" src="/static/logo.png"></image>
|
||||
<view>
|
||||
<text class="title">{{title}}</text>
|
||||
</view>
|
||||
<view>
|
||||
<Table></Table>
|
||||
<TreeTable></TreeTable>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Table from "./table.vue"
|
||||
import TreeTable from "./tree-table.vue"
|
||||
export default {
|
||||
components: {
|
||||
Table,
|
||||
TreeTable
|
||||
},
|
||||
created() {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: 'Hello'
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 200rpx;
|
||||
width: 200rpx;
|
||||
margin: 200rpx auto 50rpx auto;
|
||||
}
|
||||
|
||||
.text-area {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
color: #8f8f94;
|
||||
}
|
||||
</style>
|
||||
<style scoped></style>
|
||||
|
||||
@@ -0,0 +1,188 @@
|
||||
<template>
|
||||
<view class="c-column" style="width: 100%;height: 40vh;">
|
||||
<view class="c-row" style="margin: 5px;">
|
||||
<button type="default" @click="addRow">新增</button>
|
||||
<button type="default" @click="removeRow">删除</button>
|
||||
<button type="default" @click="saveRow">保存</button>
|
||||
</view>
|
||||
<c-table class="c-filling" ref="table" :initTable="initTable" @tableEvents="tableEvents"
|
||||
@slotEvents="slotEvents" @initComplete="initComplete" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
initTable: {
|
||||
columns: [{
|
||||
type: "checkbox",
|
||||
width: 50,
|
||||
},
|
||||
{
|
||||
type: "seq",
|
||||
width: 50,
|
||||
title: "序号",
|
||||
},
|
||||
{
|
||||
field: "Name",
|
||||
title: "名称",
|
||||
width: 150,
|
||||
editRender: {
|
||||
name: "input",
|
||||
props: {
|
||||
type: "input"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
field: "Sex",
|
||||
title: "年龄",
|
||||
width: 100,
|
||||
editRender: {
|
||||
name: "$input",
|
||||
props: {
|
||||
type: "integer"
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
field: "Gender",
|
||||
title: "性别",
|
||||
width: 100,
|
||||
editRender: {
|
||||
name: "$select",
|
||||
options: [{
|
||||
label: '女',
|
||||
value: '0'
|
||||
},
|
||||
{
|
||||
label: '男',
|
||||
value: '1'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
field: "birthday",
|
||||
title: "出生日期",
|
||||
width: 150,
|
||||
editRender: {
|
||||
name: "$input",
|
||||
props: {
|
||||
type: "date"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: 130,
|
||||
slots: {
|
||||
default: 'operate'
|
||||
},
|
||||
fixed: "right"
|
||||
}
|
||||
],
|
||||
loading: false, //加载遮罩
|
||||
//注册表格事件列点击事件，行点击事件
|
||||
initEventsList: ["header-cell-click", "cell-click"],
|
||||
//插槽内容
|
||||
initSlotString: `
|
||||
<template #operate="{ row }">
|
||||
<vxe-button @click="slotEvents(row)">获取行对象</vxe-button>
|
||||
</template>
|
||||
`
|
||||
},
|
||||
data: [{
|
||||
Name: "张三",
|
||||
Sex: 18,
|
||||
Gender: "1"
|
||||
}, {
|
||||
Name: "小红",
|
||||
Sex: 19,
|
||||
Gender: "0",
|
||||
birthday: new Date()
|
||||
}, {
|
||||
Name: "李四",
|
||||
Sex: 20,
|
||||
Gender: "1"
|
||||
}, {
|
||||
Name: "王五",
|
||||
Sex: 20,
|
||||
Gender: "1"
|
||||
}]
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
//表格加载完成回调函数
|
||||
initComplete() {
|
||||
this.$refs.table.setTableProps({
|
||||
loading: true,
|
||||
})
|
||||
//模拟异步加载数据
|
||||
setTimeout(() => {
|
||||
this.$refs.table.setTableProps({
|
||||
loading: false,
|
||||
data: this.data,
|
||||
editRules: {
|
||||
Name: [{
|
||||
required: true,
|
||||
message: '请填写名称'
|
||||
}],
|
||||
Sex: [{
|
||||
type: "number",
|
||||
min: 0,
|
||||
max: 150,
|
||||
message: '格式不正确'
|
||||
}],
|
||||
}
|
||||
})
|
||||
}, 1000)
|
||||
},
|
||||
addRow() {
|
||||
this.$refs.table.callMethods("insert", {
|
||||
Sex: 18,
|
||||
Gender: "1",
|
||||
})
|
||||
},
|
||||
removeRow() {
|
||||
this.$refs.table.callMethods("removeCheckboxRow")
|
||||
},
|
||||
async saveRow() {
|
||||
let validateRES = await this.$refs.table.callMethods("validate")
|
||||
//判断校验是否通过
|
||||
if (validateRES != undefined) return
|
||||
uni.showToast({
|
||||
title: "校验通过"
|
||||
})
|
||||
this.$refs.table.callMethods("getRecordset").then(res => {
|
||||
console.log(res);
|
||||
})
|
||||
},
|
||||
tableEvents(p) {
|
||||
console.log(p);
|
||||
},
|
||||
slotEvents(p) {
|
||||
console.log(p);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.c-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.c-filling {
|
||||
height: 10px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.c-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,148 @@
|
||||
<template>
|
||||
<view style="width: 100%;height: 40vh;">
|
||||
<c-table ref="table" style="width: 100%;height: 100%;" :initTable="initTable" @initComplete="initComplete" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 获取主键
|
||||
* @param {Object} len 生成主键的长度
|
||||
* @param {Object} radix 基数
|
||||
*/
|
||||
function $getKey(len, radix) {
|
||||
let chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
|
||||
let uuid = [],
|
||||
i;
|
||||
radix = radix || chars.length;
|
||||
|
||||
if (len) {
|
||||
// Compact form
|
||||
for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];
|
||||
} else {
|
||||
// rfc4122, version 4 form
|
||||
let r;
|
||||
|
||||
// rfc4122 requires these characters
|
||||
uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
|
||||
uuid[14] = '4';
|
||||
|
||||
// Fill in random data. At i==19 set the high bits of clock sequence as
|
||||
// per rfc4122, sec. 4.1.5
|
||||
for (i = 0; i < 32; i++) {
|
||||
if (!uuid[i]) {
|
||||
r = 0 | Math.random() * 16;
|
||||
uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
|
||||
}
|
||||
}
|
||||
}
|
||||
return uuid.join('');
|
||||
}
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
initTable: {
|
||||
columns: [{
|
||||
treeNode: true, //在这个列上显示展开图标
|
||||
field: "name",
|
||||
title: "菜单名称",
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
field: "code",
|
||||
title: "菜单代码",
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
field: "creationTime",
|
||||
title: "创建时间",
|
||||
width: 100,
|
||||
}
|
||||
],
|
||||
loading: false, //加载遮罩
|
||||
//树菜单额外配置
|
||||
treeConfig: {
|
||||
children: 'children',
|
||||
line: true,
|
||||
reserve: true
|
||||
},
|
||||
line: true,
|
||||
reserve: true,
|
||||
rowId: "id"
|
||||
},
|
||||
//树形菜单数据
|
||||
data: [{
|
||||
id: $getKey(),
|
||||
name: "一级菜单1",
|
||||
code: 996,
|
||||
creationTime: "2021-12-02",
|
||||
children: [{
|
||||
id: $getKey(),
|
||||
name: "二级菜单1",
|
||||
code: 996,
|
||||
creationTime: "2021-12-02",
|
||||
}, {
|
||||
id: $getKey(),
|
||||
name: "二级菜单2",
|
||||
code: 996,
|
||||
creationTime: "2021-12-02",
|
||||
|
||||
}, {
|
||||
id: $getKey(),
|
||||
name: "二级菜单3",
|
||||
code: 996,
|
||||
creationTime: "2021-12-02",
|
||||
children: [{
|
||||
id: $getKey(),
|
||||
name: "三级菜单1",
|
||||
code: 996,
|
||||
creationTime: "2021-12-02",
|
||||
}]
|
||||
}]
|
||||
}, {
|
||||
id: $getKey(),
|
||||
name: "一级菜单2",
|
||||
code: 996,
|
||||
creationTime: "2021-12-02",
|
||||
|
||||
}, {
|
||||
id: $getKey(),
|
||||
name: "一级菜单3",
|
||||
code: 996,
|
||||
creationTime: "2021-12-02",
|
||||
children: [{
|
||||
id: $getKey(),
|
||||
name: "二级菜单1",
|
||||
code: 996,
|
||||
creationTime: "2021-12-02",
|
||||
}, {
|
||||
id: $getKey(),
|
||||
name: "二级菜单2",
|
||||
code: 996,
|
||||
creationTime: "2021-12-02",
|
||||
|
||||
}]
|
||||
}]
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
//表格加载完成回调函数
|
||||
initComplete() {
|
||||
this.$refs.table.setTableProps({
|
||||
loading: true,
|
||||
})
|
||||
//模拟异步加载数据
|
||||
setTimeout(() => {
|
||||
this.$refs.table.setTableProps({
|
||||
loading: false,
|
||||
data: this.data,
|
||||
})
|
||||
}, 1000)
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
Reference in New Issue
Block a user