no message
Former-commit-id: 70df143ed54e07f4c74dbebb9c85c16a5e04f504 Former-commit-id: 1a0534b7c0087f8fe19ade542d92e91d4a246b20 Former-commit-id: a481d3ebd87daf3170d60b660a951438e5a7358a
This commit is contained in:
@@ -5,6 +5,12 @@
|
||||
</div>
|
||||
<p class="page-index-article-body__title">{{title}}</p>
|
||||
<p class="page-index-article-body__sub-title dd-mt-0">{{subTitle}}</p>
|
||||
<a target="blank" href="https://github.com/FairyEver/d2admin-vue-element">
|
||||
<img
|
||||
style="position: absolute; top: 0; right: 0; border: 0;"
|
||||
src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"
|
||||
alt="Fork me on GitHub">
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,120 +0,0 @@
|
||||
<template>
|
||||
<Container type="card-full">
|
||||
<template slot="header">
|
||||
当前激活的单元格
|
||||
</template>
|
||||
<el-table v-bind="table">
|
||||
<el-table-column prop="id" label="id" width="50" align="center"></el-table-column>
|
||||
<el-table-column prop="name" label="姓名" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-bind="inputSettingMaker(scope)"></el-input>
|
||||
<!-- <button @click="log(scope)">测试</button> -->
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="address1" label="出生地" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-bind="inputSettingMaker(scope)"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="address2" label="现居地" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-input v-bind="inputSettingMaker(scope)"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="100" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button v-bind="editButtonSettingMaker(scope)">编辑</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</Container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import sleep from '@/utils/sleep.js'
|
||||
import Mock from 'mockjs'
|
||||
import _clonedeep from 'lodash.clonedeep'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
// 绑定到表格的数据
|
||||
table: {
|
||||
data: [],
|
||||
size: 'mini',
|
||||
stripe: true,
|
||||
border: true
|
||||
},
|
||||
// 请求得到的原始数据
|
||||
dataOriginal: null
|
||||
}
|
||||
},
|
||||
created () {
|
||||
// 自动请求数据
|
||||
this.getData()
|
||||
},
|
||||
methods: {
|
||||
// 请求数据
|
||||
async getData () {
|
||||
// 拿到数据
|
||||
const data = this.dataFilter(await this.dataMaker())
|
||||
// 保存备份
|
||||
this.dataOriginal = _clonedeep(data)
|
||||
// 将值赋给表格
|
||||
this.table.data = _clonedeep(data)
|
||||
},
|
||||
// 过滤数据部分 模拟过滤掉 star 字段 并且添加 __edit 字段
|
||||
dataFilter (val) {
|
||||
const rowFilter = ({
|
||||
id = '',
|
||||
name = '',
|
||||
address1 = '',
|
||||
address2 = ''
|
||||
}) => ({
|
||||
id,
|
||||
name,
|
||||
address1,
|
||||
address2,
|
||||
__edit: false // 在这里可以添加额外的判断逻辑
|
||||
})
|
||||
return val.map(e => rowFilter(e))
|
||||
},
|
||||
// 模拟返回数据。没有必要写在全局 mock 设置中,就在这里这样写了,这样删文件的时候也好处理
|
||||
dataMaker () {
|
||||
return new Promise((resolve, reject) => {
|
||||
resolve(Mock.mock({
|
||||
'list|4-10': [{
|
||||
'id|+1': 1,
|
||||
'name': '@CNAME',
|
||||
'address1': '@CITY',
|
||||
'address2': '@CITY',
|
||||
'star|1-5': '★'
|
||||
}]
|
||||
}).list)
|
||||
})
|
||||
},
|
||||
// 返回输入组件需要的参数
|
||||
inputSettingMaker (scope) {
|
||||
return {
|
||||
value: scope.row[scope.column.property],
|
||||
placeholder: scope.column.label,
|
||||
size: 'small',
|
||||
style: {
|
||||
maxWidth: '200px'
|
||||
}
|
||||
}
|
||||
},
|
||||
// 返回编辑按钮需要的参数
|
||||
editButtonSettingMaker (scope) {
|
||||
const isEdit = scope.row.__edit
|
||||
return {
|
||||
size: 'small',
|
||||
type: isEdit ? 'primary' : ''
|
||||
}
|
||||
},
|
||||
// 测试
|
||||
log (scope) {
|
||||
console.log(scope)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -2,8 +2,9 @@ import Vue from 'vue'
|
||||
import { Message } from 'element-ui'
|
||||
import axios from 'axios'
|
||||
|
||||
// 在这里对返回的数据进行处理
|
||||
// 在这里添加你自己的逻辑
|
||||
axios.interceptors.response.use(res => {
|
||||
// 在这里对返回的数据进行处理
|
||||
if (res.data.code !== undefined) {
|
||||
if (res.data.code !== 0) {
|
||||
Message.error(res.data.msg)
|
||||
|
||||
@@ -36,23 +36,6 @@ export const menu = {
|
||||
component: resolve => { require(['@/pages/demo/business/user-center/home/index.vue'], resolve) }
|
||||
}
|
||||
]
|
||||
},
|
||||
// 表格
|
||||
{
|
||||
title: '表格示例',
|
||||
icon: 'table',
|
||||
children: [
|
||||
{
|
||||
title: '可编辑',
|
||||
icon: 'file-o',
|
||||
path: 'table/edit',
|
||||
name: 'demo-business-table-edit',
|
||||
meta: {
|
||||
requiresAuth: true
|
||||
},
|
||||
component: resolve => { require(['@/pages/demo/business/table/edit/index.vue'], resolve) }
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user