vue 自定义表格
dom部分 主要用的是Ant Design of Vue - Ant Design Vue (antdv.com) 组件ant
*
{{ins.name}}
{{iee.name}}
删除
{{ins.name}}
{{iee.name}}
删除
{{i.name}}
{{i.name}}
{{i.name}}
{{im.name}}
+
新增行（最多50行）
数据部分 没用的地方我没挑出来
props: ['tabIndex'],//这个地方是这个页面收到的 1 ,2 判断状态
components: {},
data() {
return {
topHead: [{
name: '操作',
},
{
name: this.tabIndex == 1 ? "手机号" : "Union ID",
}, {
name: '来源',
setpes: 1,
childe: [{
name: '基础属性'
},
{
name: '自定义字段'
},
{
name: '删除'
},
]
}, {
name: '年龄',
setpes: 1,
childe: [{
name: '基础属性'
},
{
name: '自定义字段'
},
{
name: '删除'
},
]
}, {
name: '描述',
setpes: 1,
childe: [{
name: '基础属性'
},
{
name: '自定义字段'
},
{
name: '删除'
},
]
}, {
name: '新增列',
childe: [{
name: '基础属性'
},
{
name: '自定义字段'
},
]
},
],
tbody: [{
list: [{
row: [{
name: '删除'
}, {
name: ''
}, {
name: ''
}, {
name: ''
}, {
name: ''
}]
}]
}, ],
close: '已关闭',
setone1: [{
name: "aaaaaa",
setpes: 1
}, {
name: "bbbbbb",
setpes: 1
}, {
name: "cccccc",
setpes: 1
}],
setone4: [{
name: "aaaaaa",
setpes: 1
}, {
name: "bbbbbb",
setpes: 1
}, {
name: "cccccc",
setpes: 1
}],
setone2: [{
name: "1",
setpes: 2
}, {
name: "2",
setpes: 2
}, {
name: "3",
setpes: 2
}],
setone3: [{
name: "1",
setpes: 2
}, {
name: "2",
setpes: 2
}, {
name: "3",
setpes: 2
}],
searchValue1: '',
searchValue2: '',
listAdd: [{
row: [{
name: '删除'
}, {
name: ''
}, {
name: ''
}, {
name: ''
}, {
name: ''
}]
}],
loadOver: false,
maxlength: 64,js部分没用的地方没调出来
ded(e) {
let ta = this
let resdata = JSON.parse(JSON.stringify(ta.tbody));
if (resdata.length == 1) {
return false
}
ta.$confirm({
title: '提示',
content: '是否要删除此行数据？',
centered: true,
okText: '删除',
cancelText: '取消',
onOk() {
ta.tbody.splice(e, 1)
}
})
},
// 最关键的部分，监听scrollHeight,设置输入框高度
handleInput(e, clause) {
// let rea = /^[0-9.]+$/; //数字
// if (!rea.test(e.target._value)) {
// console.log('budui')
// i.list[index].row[1].name = ""
// return false;
// } else {
if (this.tabIndex == 1) {
if (clause == 1) {
this.maxlength = 11
}
}
// }
e.target.style.height = 'auto'
e.target.style.height = `${e.target.scrollHeight}px`
},
add() {
let list = []
if( this.tbody.length<50){
this.tbody.forEach((i, index) => {
list = i
})
if (list.length) {
this.tbody.push(list)
} else {
list = {
list: this.listAdd
}
this.tbody.push(list)
console.log(this.tbody)
}
}
},
onChange(checked) {
console.log(`a-switch to ${checked}`);
this.close = checked ? '已打开' : '已关闭'
},
getChange1(e) {
console.log(11111111111, this.searchValue1, this.setone1)
let value = this.searchValue1
let setone1 = []
this.setone1.forEach((i) => {
if (i.name == value) {
setone1.push({
name: i.name
})
}
})
console.log(setone1)
if (this.searchValue1) {
this.setone4 = setone1
} else {
this.setone4 = this.setone1
}
},
getChange2(e) {
console.log(11111111111, e)
let value = this.searchValue2
let setone2 = []
this.setone2.forEach((i) => {
if (i.name == value) {
setone2.push({
name: i.name,
})
}
})
if (this.searchValue2) {
this.setone3 = setone2
} else {
this.setone3 = this.setone2
}
},
handleMenuClick1(inx, e) {
this.searchValue1 = ''
let index = inx
let idex = inx
let topHeadName = this.topHead[inx].name
let setone2Name = this.setone1[e].name
let setpes = this.setone1[e].setpes
this.searchValue1 = ''
if (this.topHead[inx].setpes == 1) {
this.setone1.push({
name: topHeadName,
setpes: this.topHead[inx].setpes
})
this.setone4.push({
name: topHeadName,
setpes: this.topHead[inx].setpes
})
} else {
this.setone2.push({
name: topHeadName,
setpes: this.topHead[inx].setpes
})
this.setone3.push({
name: topHeadName,
setpes: this.topHead[inx].setpes
})
}
this.setone1.splice(e, 1)
this.setone4.splice(e, 1)
this.topHead[inx].name = setone2Name
this.topHead[inx].setpes = setpes
console.log('this.topHead[inx].setpes1', this.topHead[inx].setpes)
this.tbody.forEach((i) => {
i.list[0].row[idex].name = ""
})
},
handleMenuClick2(inx, e) {
let index = inx
let idex = inx
console.log(2, inx, e, )
let topHeadName = this.topHead[inx].name
let setone2Name = this.setone2[e].name
let setpes = this.setone2[e].setpes
this.searchValue2 = ''
if (this.topHead[inx].setpes == 1) {
this.setone1.push({
name: topHeadName,
setpes: this.topHead[inx].setpes
})
this.setone4.push({
name: topHeadName,
setpes: this.topHead[inx].setpes
})
} else {
this.setone2.push({
name: topHeadName,
setpes: this.topHead[inx].setpes
})
this.setone3.push({
name: topHeadName,
setpes: this.topHead[inx].setpes
})
}
this.setone2.splice(e, 1)
this.setone3.splice(e, 1)
this.topHead[inx].name = setone2Name
this.topHead[inx].setpes = setpes
console.log('this.topHead[inx].setpes2', this.topHead[inx].setpes)
this.tbody.forEach((i) => {
i.list[0].row[idex].name = ""
})
},
handleMenuClick3(inx, e) {
let index = inx
let idex = inx
let topHeadName = this.topHead[inx].name
console.log('inx', inx, this.topHead[inx].setpes)
let setpes = this.topHead[inx].setpes
if (this.topHead[inx].setpes == 1) {
this.setone1.push({
name: topHeadName,
setpes: setpes
})
this.setone4.push({
name: topHeadName,
setpes: setpes
})
} else {
this.setone2.push({
name: topHeadName,
setpes: setpes
})
this.setone3.push({
name: topHeadName,
setpes: setpes
})
}
this.topHead.splice(inx, 1)
this.tbody.forEach((i) => {
i.list[0].row.splice(idex, 1)
})
},
handleMenuClick4(inx, e) {
let index = inx
let idex = inx
let setone2Name = this.setone1[e].name
let setpes = this.setone1[e].setpes
this.topHead.splice(idex, 0, {
name: setone2Name,
setpes: setpes,
childe: [{
name: '基础属性'
},
{
name: '自定义字段'
},
{
name: '删除'
},
]
})
this.searchValue1 = ''
this.setone1.splice(e, 1)
this.setone4.splice(e, 1)
this.listAdd[0].row.push({
name: ""
})
this.tbody[0].list[0].row.splice(inx, 0, {
name: ""
})
},
handleMenuClick5(inx, e) {
let index = inx
let idex = inx
let setone2Name = this.setone2[e].name
let setpes = this.setone2[e].setpes
this.topHead.splice(idex, 0, {
name: setone2Name,
setpes: setpes,
childe: [{
name: '基础属性'
},
{
name: '自定义字段'
},
{
name: '删除'
},
]
})
this.searchValue2 = ''
this.setone2.splice(e, 1)
this.setone3.splice(e, 1)
this.listAdd[0].row.push({
name: ""
})
this.tbody[0].list[0].row.splice(inx, 0, {
name: ""
})
},
navTab() {
},
aButton() {
this.tbody.forEach((i, index) => {
if (i.list[index].row[1].name == "") {
this.$message.error(`${this.topHead[1].name}格式不对,请重新输入`);
}
})
}