vue 自定义表格
数据部分 没用的地方我没挑出来。js部分没用的地方没调出来。dom部分主要用的是。
·
dom部分 主要用的是Ant Design of Vue - Ant Design Vue (antdv.com) 组件ant
<table border class="border-table">
<thead class="bg-color">
<tr>
<th v-for="(i,index) in topHead" :key="index">
<div class="flex align-cecnter ">
<span class="span-x" v-if="i.name=='手机号'||i.name=='Union ID'">*</span>
<span class="span-x" v-if="i.name=='操作'"></span>
<a-dropdown>
<div class=" a-buttond" v-if="i.name=='新增列'">
<div class="antion-in">+</div>
<span class="span-t"> {{i.name}}</span>
</div>
<a-menu slot="overlay" v-if="i.name!='新增列'">
<!-- 基础 -->
<a-sub-menu v-for="(item,indexs) in i.childe" v-if="item.name!='删除'&&item.name!='自定义字段'"
:key="indexs" :title="item.name">
<a-menu-item>
<a-input-search @click.stop="getChange1" v-model="searchValue1" style="width:200px"
placeholder="请输入标签名进行搜索" allow-clear @change="getChange1"></a-input-search>
</a-menu-item>
<Empty v-if="setone4.length === 0" class="Empty" />
<a-menu-item @click="handleMenuClick1(index,dex)" v-for="(ins,dex) in setone4" :key="dex">
{{ins.name}}
</a-menu-item>
</a-sub-menu>
<!-- 自定义 -->
<a-sub-menu v-for="(item,indexs) in i.childe" v-if="item.name!='删除'&& item.name!='基础属性'"
:key="indexs" :title="item.name">
<a-menu-item>
<a-input-search @click.stop="getChange2" v-model="searchValue2" style="width:200px"
placeholder="请输入标签名进行搜索" allow-clear @change="getChange2"></a-input-search>
</a-menu-item>
<Empty v-if="setone3.length === 0" class="Empty" />
<a-menu-item v-else @click="handleMenuClick2(index,indexs)" v-for="(iee,indexs) in setone3"
:key="indexs"> {{iee.name}}</a-menu-item>
</a-sub-menu>
<a-menu-item v-for="(item,indexs) in i.childe" v-if="item.name=='删除'" :key="indexs"
@click="handleMenuClick3(index)">
删除
</a-menu-item>
</a-menu>
<!-- 新增111111111111111111111111 -->
<a-menu slot="overlay" v-if="i.name=='新增列'">
<a-sub-menu v-for="(item,indexs) in i.childe" v-if="item.name!='删除'&&item.name!='自定义字段'"
:key="indexs" :title="item.name">
<a-menu-item>
<a-input-search @click.stop="getChange1" v-model="searchValue1" style="width:200px"
placeholder="请输入标签名进行搜索" allow-clear @change="getChange1"></a-input-search>
</a-menu-item>
<Empty v-if="setone4.length === 0" class="Empty" />
<a-menu-item @click="handleMenuClick4(index,dex)" v-for="(ins,dex) in setone4" :key="dex">
{{ins.name}}
</a-menu-item>
</a-sub-menu>
<a-sub-menu v-for="(item,indexs) in i.childe" v-if="item.name!='删除'&& item.name!='基础属性'"
:key="indexs" :title="item.name">
<a-menu-item>
<a-input-search @click.stop="getChange2" v-model="searchValue2" style="width:200px"
placeholder="请输入标签名进行搜索" allow-clear @change="getChange2"></a-input-search>
</a-menu-item>
<Empty v-if="setone3.length === 0" class="Empty" />
<a-menu-item v-else @click="handleMenuClick5(index,indexs)" v-for="(iee,indexs) in setone3"
:key="indexs"> {{iee.name}}</a-menu-item>
</a-sub-menu>
<a-menu-item v-for="(item,indexs) in i.childe" v-if="item.name=='删除'" :key="indexs"
@click="handleMenuClick3(index)">
删除
</a-menu-item>
</a-menu>
<a-button v-show="i.name!='手机号'&&i.name!='新增列'&&i.name!='操作'&&i.name!='Union ID'"
class="a-button">
{{i.name}}
<a-icon type="down" />
</a-button>
</a-dropdown>
<span class="span-in" v-if="i.name=='手机号'||i.name=='Union ID'"> {{i.name}}</span>
<span class="span-in" v-if="i.name=='操作'"> {{i.name}}</span>
</div>
</th>
</tr>
</thead>
<tbody class="bg-tbody" v-for=" (i,index) in tbody">
<tr v-for="(it,ind) in i.list" :key="ind">
<td v-for="(im,clause) in it.row" :key="clause">
<div :class=" tbody.length==1? 'delete':'deleteAct'" v-if="im.name=='删除'" @click.stop="ded(index)">
{{im.name}}
</div>
<textarea class="textareae" v-else :maxlength="maxlength" rows="1" v-model="im.name" placeholder="请输入"
@input="handleInput($event,clause)"></textarea>
</td>
</tr>
</tbody>
<tfoot class="bg-tfoot">
<tr>
<td colspan="20">
<div class="flex align-start" @click.stop="add">
<div class="antion-in">+</div>
<div class="delete"> 新增行（最多50行）</div>
</div>
</td>
</tr>
</tfoot>
</table>数据部分 没用的地方我没挑出来
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}格式不对,请重新输入`);
}
})
}
前往低代码交流专区
更多推荐
4
0- 0
已为社区贡献2条内容
所有评论(0)