element-easy
Version:
crud for element ui
323 lines (318 loc) • 7.8 kB
JavaScript
function getApi () {
return new Promise((resolve, reject) => {
setTimeout(resolve, 1000)
})
}
function getDetails () {
return new Promise((resolve) => {
setTimeout(() => {
resolve({
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
show: 'true',
food: '北京烤鸭',
food2: '北京烤鸭',
tree: ['二级 3-1']
})
}, 1000)
})
}
let time = 1
function getList () {
return new Promise((resolve) => {
setTimeout(() => {
resolve({
total: 20,
list: [
{
date: '2016-05-02',
name: '王小虎1',
address: '上海市普陀区金沙江路 1518 弄',
show: true,
food: '北京烤鸭',
food2: '北京烤鸭'
},
{
date: '2016-05-04',
name: '王小虎2',
address: '上海市普陀区金沙江路 1517 弄',
show: false,
food: '龙须面'
},
{
date: '2016-05-01',
name: '王小虎3',
address: '上海市普陀区金沙江路 1519 弄',
show: false,
food: '黄金糕'
},
{
date: '2016-05-03',
name: '王小虎4',
address: '上海市普陀区金沙江路 1516 弄',
show: false,
food: '蚵仔煎'
},
{
date: '2016-05-04',
name: '王小虎5',
address: '上海市普陀区金沙江路 1517 弄',
show: false,
food: '龙须面'
},
{
date: '2016-05-01',
name: '王小虎6',
address: '上海市普陀区金沙江路 1519 弄',
show: false,
food: '黄金糕'
},
{
date: '2016-05-03',
name: '王小虎1',
address: '上海市普陀区金沙江路 1516 弄',
show: false,
food: '蚵仔煎'
}
]
})
}, 1000)
})
}
export default function getTable () {
return {
options: {
size: 'mini'
},
tools: {
showControls: false
},
search: {
buttons: [
{
name: 'reset',
type: 'info',
text: '重置'
},
{
name: 'search',
type: 'primary',
text: '查询'
}
]
},
pagination: {
// show: false,
pageSizes: [5, 10, 20],
pageSize: 5,
currentPage: 1
},
actions: {
label: '操作',
outerStyles: {
showText: false
},
add: {
show: true,
api: (data) => {
console.log(data)
return getApi()
}
},
edit: {
show: () => {
return this.testEdit
},
api: (data) => {
console.log(data)
return getApi()
}
},
delete: {
show: false,
showMultiple: () => true,
api: (data) => {
console.log(data)
return getApi()
}
},
list: {
api: ({ params, currentPage, pageSize }) => {
console.log('>>>', params, currentPage, pageSize)
return new Promise((resolve, reject) => {
getList()
.then((data) => {
this.testEdit = time > 1
time++
resolve(data)
})
.catch(reject)
})
}
},
details: {
api: (params) => {
return getDetails()
}
}
},
thead: [
{
prop: 'name',
label: '姓名',
default: '张三',
tooltip: '哈哈哈哈',
width: 180,
searchShow: true,
form: {
type: 'File',
api: (formData) => {
console.log('formData', formData.get('file'))
return new Promise((resolve) => {
setTimeout(() => {
resolve('https://baidu.com')
}, 3000)
})
}
},
formRules: [{ required: true, message: '请输入姓名', trigger: 'blur' }]
},
{
prop: 'food',
label: '食物',
width: 200,
form: {
type: 'radio',
tooltip: '哈哈哈哈',
options: this.foodOptons
},
formRules: [
{ required: true, message: '请选择食物', trigger: 'change' }
],
searchShow: true,
searchForm: {
type: 'select',
options: this.foodOptons
},
render: (h, scope) => {
return (
<ez-form-child
type="select"
vModel={scope.row.food}
options={this.foodOptons}
/>
)
}
},
{
prop: 'address',
label: '地址',
form: {
type: 'textarea'
},
render: (h, scope) => {
return <ez-form-child type="text" vModel={scope.row.address} />
}
},
{
prop: 'show',
label: '状态',
width: 100,
form: {
type: 'switch'
},
render: (h, scope) => {
return <ez-form-child type="switch" vModel={scope.row.show} />
}
},
{
prop: 'date',
label: '日期',
width: 150,
align: 'center',
form: {
type: 'date',
valueFormat: 'yyyy-MM-dd'
},
searchShow: true,
searchForm: {
type: 'daterange'
},
formatter (scope) {
return scope.row.date
}
},
{
prop: 'tree',
label: '树结构',
show: false,
form: {
type: 'tree',
nodeKey: 'label',
controls: true,
data: [
{
label: '一级 1',
children: [
{
label: '二级 1-1',
children: [
{
label: '三级 1-1-1'
}
]
}
]
},
{
label: '一级 2',
children: [
{
label: '二级 2-1',
children: [
{
label: '三级 2-1-1'
}
]
},
{
label: '二级 2-2',
children: [
{
label: '三级 2-2-1'
}
]
}
]
},
{
label: '一级 3',
children: [
{
label: '二级 3-1',
children: [
{
label: '三级 3-1-1'
}
]
},
{
label: '二级 3-2',
children: [
{
label: '三级 3-2-1'
},
{
label: '三级 3-2-2'
}
]
}
]
}
]
}
}
]
}
}