修改表格
This commit is contained in:
zouzhibing
parent
f30a6d298a
commit
8c256aafcb
|
|
@ -25,7 +25,12 @@ const tableRouter = {
|
|||
name: 'inline-table',
|
||||
meta: { title: '行内编辑', noCache: true }
|
||||
},
|
||||
|
||||
{
|
||||
path: 'edit-table',
|
||||
component: () => import('@/views/table/edit.vue'),
|
||||
name: 'edit-table',
|
||||
meta: { title: '可编辑表格', noCache: true }
|
||||
},
|
||||
]
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,12 +5,12 @@ import { parseTime } from './uniele'
|
|||
*/
|
||||
export function formatDate(cellValue) {
|
||||
if (cellValue == null || cellValue == "") return "";
|
||||
var date = new Date(cellValue)
|
||||
var date = new Date(cellValue)
|
||||
var year = date.getFullYear()
|
||||
var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
|
||||
var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
|
||||
var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
|
||||
var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
|
||||
var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
|
||||
var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
|
||||
var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
|
||||
var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
|
||||
return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
|
||||
}
|
||||
|
|
@ -330,7 +330,7 @@ export function makeMap(str, expectsLowerCase) {
|
|||
? val => map[val.toLowerCase()]
|
||||
: val => map[val]
|
||||
}
|
||||
|
||||
|
||||
export const exportDefault = 'export default '
|
||||
|
||||
export const beautifierConf = {
|
||||
|
|
@ -387,4 +387,28 @@ export function camelCase(str) {
|
|||
export function isNumberStr(str) {
|
||||
return /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g.test(str)
|
||||
}
|
||||
|
||||
|
||||
// // 深度克隆 array 数组或 json 对象，返回克隆后的副本
|
||||
export const deepObjClone = function(obj){
|
||||
let weakMap = new WeakMap()
|
||||
function clone (obj){
|
||||
if(obj==null){return obj}
|
||||
if(obj instanceof Date){ return new Date(obj) }
|
||||
if(obj instanceof RegExp){ return new RegExp(obj)}
|
||||
if(typeof obj !== 'object') return obj
|
||||
|
||||
if(weakMap.get(obj)){
|
||||
return weakMap.get(obj)
|
||||
}
|
||||
var copy = new obj.constructor
|
||||
weakMap.set(obj,copy)
|
||||
for(var key in obj){
|
||||
if(Object.prototype.hasOwnProperty.call(obj, key)){
|
||||
var value = obj[key];
|
||||
copy[key] = clone(value);
|
||||
}
|
||||
}
|
||||
return copy;
|
||||
}
|
||||
return clone (obj)
|
||||
};
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<el-icon style="margin-right: 4px"><plus /></el-icon> 添加一行数据</el-button>
|
||||
</div>
|
||||
<el-table :data="transData" style="width: 100%" row-key="id" border>
|
||||
<template v-for="item in columns" >
|
||||
<template v-for="item,index in columns" >
|
||||
<el-table-column v-if="item.type" :type="item.type" :width="item.width" :align="item.align" :fixed="item.fixed" :label="item.label"/>
|
||||
<el-table-column
|
||||
v-else
|
||||
|
|
@ -68,35 +68,33 @@
|
|||
type="primary"
|
||||
size="small"
|
||||
icon="Edit"
|
||||
@click="scope.row.edit=!scope.row.edit"
|
||||
@click="edit(scope.row)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-popover
|
||||
trigger="click"
|
||||
v-model:visible="scope.row.visible" placement="top" :width="160">
|
||||
placement="top"
|
||||
width="160"
|
||||
v-model="scope.row.visible">
|
||||
<p style="display: flex;align-items: center;margin-bottom: 10px">
|
||||
<el-icon color="#faad14" style="margin-right: 10px"><warning-filled /></el-icon> 删除此行？</p>
|
||||
<i class="el-icon-warning" style="margin-right: 10px;color: #faad14"></i>
|
||||
删除此行？</p>
|
||||
<div style="text-align: right; margin: 0">
|
||||
<el-button size="small" @click="scope.row.visible = false"
|
||||
<el-button size="small" @click.stop="cancelVisible(scope.row)"
|
||||
>取消</el-button
|
||||
>
|
||||
<el-button size="small" type="primary" @click="deleteAction(scope.row)"
|
||||
<el-button size="small" type="primary" @click.stop="deleteConfigAction(scope.row)"
|
||||
>确定</el-button
|
||||
>
|
||||
</div>
|
||||
<template #reference>
|
||||
<el-button
|
||||
icon="Delete"
|
||||
@click="scope.row.visible = true" type="danger" size="small">删除</el-button>
|
||||
</template>
|
||||
<el-button slot="reference" @click.stop="deleteAction(scope.row)" type="danger" size="small">删除</el-button>
|
||||
</el-popover>
|
||||
<el-button
|
||||
v-if="scope.row.edit"
|
||||
type="primary"
|
||||
size="small"
|
||||
icon="Edit"
|
||||
@click="cancelEdit(scope.row)"
|
||||
@click.stop="cancelEdit(scope.row)"
|
||||
>
|
||||
取消
|
||||
</el-button>
|
||||
|
|
@ -109,160 +107,167 @@
|
|||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import {computed, onMounted, ref, watch} from "vue";
|
||||
import {deepObjClone} from '@/utils/index'
|
||||
import { ElMessage,ElMessageBox } from 'element-plus'
|
||||
import { reactive } from 'vue'
|
||||
const emit = defineEmits(['del','add','onChange'])
|
||||
let transData = ref([])
|
||||
|
||||
let props = defineProps({
|
||||
columns:{
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
<script>
|
||||
import {deepObjClone} from '@/utils/index'
|
||||
export default {
|
||||
props:{
|
||||
columns:{
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
},
|
||||
data:{
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
},
|
||||
editableKeys:{
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
},
|
||||
mode:{
|
||||
type:String,
|
||||
default:'bottom'
|
||||
}
|
||||
},
|
||||
data:{
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
},
|
||||
editableKeys:{
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
},
|
||||
mode:{
|
||||
type:String,
|
||||
default:'bottom'
|
||||
}
|
||||
})
|
||||
const getData = ()=>{
|
||||
let arr = deepObjClone(transData.value)
|
||||
for(let item of arr){
|
||||
for(let attr in item){
|
||||
if(attr.includes('te__mp')){
|
||||
delete item[attr]
|
||||
data(){
|
||||
return{
|
||||
obj:{},
|
||||
transData:[],
|
||||
visible:false,
|
||||
listLoading:false,
|
||||
formInline:{
|
||||
user: '',
|
||||
region: '',
|
||||
}
|
||||
}
|
||||
}
|
||||
emit('onChange',arr)
|
||||
}
|
||||
|
||||
let obj={}
|
||||
for(let item of props.columns){
|
||||
props.data.forEach(it=>{
|
||||
if(!obj[item.name]){
|
||||
obj[item.name] = null
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const reset = ()=>{
|
||||
transData.value = props.data
|
||||
getData()
|
||||
}
|
||||
|
||||
onMounted(()=>{
|
||||
watch(()=>props.data,(val)=>{
|
||||
// // 转换数据
|
||||
transData.value = deepObjClone(val)
|
||||
// 存储一个临时变量
|
||||
for(let item of transData.value){
|
||||
if(props.editableKeys.includes(item.id)){
|
||||
item.edit = true
|
||||
},
|
||||
watch:{
|
||||
'data':{
|
||||
handler(val){
|
||||
let arr = deepObjClone(val)
|
||||
// 存储一个临时变量
|
||||
for(let item of arr){
|
||||
if(this.editableKeys.includes(item.id)){
|
||||
item.edit = true
|
||||
}
|
||||
for(let attr in item){
|
||||
let temp = `${attr}te__mp`
|
||||
item[temp] = item[attr]
|
||||
}
|
||||
}
|
||||
// // 转换数据
|
||||
this.transData = arr
|
||||
|
||||
for(let attr in item){
|
||||
let temp = `${attr}te__mp`
|
||||
item[temp] = item[attr]
|
||||
}
|
||||
|
||||
},
|
||||
deep:true,
|
||||
immediate:true
|
||||
}
|
||||
// console.log('transData',transData)
|
||||
},{
|
||||
immediate:true,
|
||||
deep:true
|
||||
})
|
||||
},
|
||||
created(){
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
const visible = ref(false)
|
||||
|
||||
const handleSizeChange = (val: number) => {
|
||||
console.log(`${val} items per page`)
|
||||
}
|
||||
|
||||
const listLoading = ref(false)
|
||||
|
||||
// 保存
|
||||
const confirmEdit = (row)=>{
|
||||
row.edit = false
|
||||
for(let attr in row){
|
||||
if(attr.includes('te__mp')){
|
||||
row[(attr)] = row[(attr.replace('te__mp',''))]
|
||||
let obj={}
|
||||
for(let item of this.columns){
|
||||
this.data.forEach(it=>{
|
||||
if(!obj[item.name]){
|
||||
obj[item.name] = null
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
getData()
|
||||
}
|
||||
// 取消
|
||||
const cancelEdit = (row)=>{
|
||||
row.edit=!row.edit
|
||||
for(let attr in row){
|
||||
if(!attr.includes('te__mp')){
|
||||
row[attr] = row[(attr+'te__mp')]
|
||||
this.obj = obj
|
||||
},
|
||||
methods:{
|
||||
cancelVisible(row){
|
||||
this.$set(row,'visible',false)
|
||||
},
|
||||
getData(){
|
||||
let arr = deepObjClone(this.transData)
|
||||
for(let item of arr){
|
||||
for(let attr in item){
|
||||
if(attr.includes('te__mp')){
|
||||
delete item[attr]
|
||||
}
|
||||
}
|
||||
}
|
||||
this.$emit('onChange',arr)
|
||||
},
|
||||
reset(){
|
||||
this.transData = this.data
|
||||
this.getData()
|
||||
},
|
||||
handleSizeChange(val){
|
||||
console.log(`${val} items per page`)
|
||||
},
|
||||
// 保存
|
||||
confirmEdit(row){
|
||||
this.$set(row,'edit',false)
|
||||
for(let attr in row){
|
||||
if(attr.includes('te__mp')){
|
||||
row[(attr)] = row[(attr.replace('te__mp',''))]
|
||||
}
|
||||
}
|
||||
this.getData()
|
||||
},
|
||||
// 取消
|
||||
cancelEdit (row){
|
||||
this.$set(row,'edit',false)
|
||||
for(let attr in row){
|
||||
if(!attr.includes('te__mp')){
|
||||
if(attr!=='edit'){
|
||||
row[attr] = row[(attr+'te__mp')]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
edit(row){
|
||||
this.$set(row,'edit',!row.edit)
|
||||
},
|
||||
deleteProver(row){
|
||||
row.visible = true
|
||||
this.$set(row,'visible',true)
|
||||
let obj1 = Object.assign({},row)
|
||||
obj1.visible = true
|
||||
},
|
||||
deleteConfigAction(row){
|
||||
this.$set(row,'visible',false)
|
||||
this.transData = this.transData.filter((item)=>item.id!==row.id)
|
||||
this.$emit('del',row)
|
||||
},
|
||||
deleteAction (row){
|
||||
|
||||
},
|
||||
add(){
|
||||
let id = ~~(Math.random() * 1000000).toFixed(0)
|
||||
let obj1 = Object.assign({},this.obj,{
|
||||
id:id,
|
||||
edit:true,
|
||||
visible:false,
|
||||
})
|
||||
|
||||
for(let attr in obj1){
|
||||
let temp = `${attr}te__mp`
|
||||
obj1[temp] = obj1[attr]
|
||||
}
|
||||
|
||||
if(this.mode==='bottom'){
|
||||
this.transData.push(obj1)
|
||||
}
|
||||
if(this.mode==='top'){
|
||||
this.transData.unshift(obj1)
|
||||
}
|
||||
},
|
||||
filterOption(item,scope){
|
||||
let obj = item.options.find(ite=>ite.value===scope.row[item.name])
|
||||
if(obj){
|
||||
return obj.label
|
||||
}
|
||||
return '--'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const formInline = reactive({
|
||||
user: '',
|
||||
region: '',
|
||||
})
|
||||
|
||||
const onSubmit = () => {
|
||||
console.log('submit!')
|
||||
}
|
||||
|
||||
const deleteAction = (row)=>{
|
||||
row.visible = false
|
||||
transData.value = transData.value.filter((item)=>item.id!==row.id)
|
||||
emit('del',row)
|
||||
}
|
||||
|
||||
const add = ()=>{
|
||||
let id = ~~(Math.random() * 1000000).toFixed(0)
|
||||
let obj1 = Object.assign({},obj,{
|
||||
id:id,
|
||||
edit:true,
|
||||
visible:false,
|
||||
})
|
||||
|
||||
for(let attr in obj1){
|
||||
let temp = `${attr}te__mp`
|
||||
obj1[temp] = obj1[attr]
|
||||
}
|
||||
|
||||
if(props.mode==='bottom'){
|
||||
transData.value.push(obj1)
|
||||
}
|
||||
if(props.mode==='top'){
|
||||
transData.value.unshift(obj1)
|
||||
}
|
||||
}
|
||||
|
||||
const filterOption = (item,scope)=>{
|
||||
let obj = item.options.find(ite=>ite.value===scope.row[item.name])
|
||||
if(obj){
|
||||
return obj.label
|
||||
}
|
||||
return '--'
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
reset
|
||||
})
|
||||
</script>
|
||||
<style scoped>
|
||||
.edit-input {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="app-container">
|
||||
<div style="display: flex;justify-content: flex-end">
|
||||
<el-radio-group v-model="radio">
|
||||
<el-radio label="top">添加到顶部</el-radio>
|
||||
|
|
@ -26,11 +26,8 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
<script >
|
||||
import EditTable from './components/edit.vue'
|
||||
import { ElMessage,ElMessageBox } from 'element-plus'
|
||||
import {ref} from "vue";
|
||||
const table = ref()
|
||||
const column = [
|
||||
{ name: 'title',
|
||||
label: '活动名称',
|
||||
|
|
@ -84,7 +81,7 @@
|
|||
update_at: '2020-05-27T08:19:22Z',
|
||||
},
|
||||
{
|
||||
id: 624291229,
|
||||
id: 6242922222,
|
||||
title: '活动名称三',
|
||||
readonly: '活动名称三',
|
||||
decs: '这个活动真好玩',
|
||||
|
|
@ -93,7 +90,7 @@
|
|||
update_at: '2020-05-27T08:19:22Z',
|
||||
},
|
||||
{
|
||||
id: 624291229,
|
||||
id: 62425491229,
|
||||
title: '活动名称四',
|
||||
readonly: '活动名称四',
|
||||
decs: '这个活动真好玩',
|
||||
|
|
@ -102,7 +99,7 @@
|
|||
update_at: '2020-05-27T08:19:22Z',
|
||||
},
|
||||
{
|
||||
id: 624291229,
|
||||
id: 62429281229,
|
||||
title: '活动名称五',
|
||||
readonly: '活动名称五',
|
||||
decs: '这个活动真好玩',
|
||||
|
|
@ -111,7 +108,7 @@
|
|||
update_at: '2020-05-27T08:19:22Z',
|
||||
},
|
||||
{
|
||||
id: 624291229,
|
||||
id: 62429091229,
|
||||
title: '活动名称六',
|
||||
readonly: '活动名称六',
|
||||
decs: '这个活动真好玩',
|
||||
|
|
@ -120,7 +117,7 @@
|
|||
update_at: '2020-05-27T08:19:22Z',
|
||||
},
|
||||
{
|
||||
id: 624291229,
|
||||
id: 62421191229,
|
||||
title: '活动名称七',
|
||||
readonly: '活动名称五',
|
||||
decs: '这个活动真好玩',
|
||||
|
|
@ -129,7 +126,7 @@
|
|||
update_at: '2020-05-27T08:19:22Z',
|
||||
},
|
||||
{
|
||||
id: 624291229,
|
||||
id: 6242222291229,
|
||||
title: '活动名称八',
|
||||
readonly: '活动名称六',
|
||||
decs: '这个活动真好玩',
|
||||
|
|
@ -138,31 +135,44 @@
|
|||
update_at: '2020-05-27T08:19:22Z',
|
||||
},
|
||||
]
|
||||
export default {
|
||||
components:{
|
||||
EditTable
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
dataSource:data,
|
||||
column,
|
||||
list:data,
|
||||
radio:'bottom',
|
||||
editableKeys:[]
|
||||
}
|
||||
},
|
||||
created(){
|
||||
let arrKeys = data.filter(item=>![624748504,624691229].includes(item.id)).map(item=>item.id)
|
||||
this.editableKeys = arrKeys
|
||||
},
|
||||
methods:{
|
||||
deleteAction(row){
|
||||
console.log('删除',row)
|
||||
this.$message.success('点击删除')
|
||||
},
|
||||
onChange(val){
|
||||
this.dataSource = val
|
||||
},
|
||||
add(){
|
||||
|
||||
let arrKeys = data.map(item=>item.id)
|
||||
const radio = ref('bottom')
|
||||
const list = ref(data)
|
||||
let editableKeys = ref(arrKeys)
|
||||
const dataSource = ref(data)
|
||||
const deleteAction = (row)=>{
|
||||
console.log('删除',row)
|
||||
ElMessage.success('点击删除')
|
||||
}
|
||||
const onChange = (val)=>{
|
||||
dataSource.value = val
|
||||
}
|
||||
const add = (row)=>{
|
||||
|
||||
}
|
||||
const reset = (val)=>{
|
||||
ElMessage.success('重置成功')
|
||||
table.value.reset()
|
||||
}
|
||||
|
||||
const config = ()=>{
|
||||
list.value = dataSource.value
|
||||
console.log('点击提交=========',dataSource.value)
|
||||
ElMessage.success('点击提交数据')
|
||||
},
|
||||
reset(val){
|
||||
this.$message.success('重置成功')
|
||||
this.$refs.table.reset()
|
||||
},
|
||||
config(){
|
||||
this.list = this.dataSource
|
||||
console.log('点击提交=========',this.dataSource)
|
||||
this.$message.success('点击提交数据')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue