<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.10/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<template>
<div>
<el-table
:data="tableData"
style="width: 100%;text-align:center"
row-key="id"
border
default-expand-all
lazy
:load="loadSearch"
:select-on-indeterminate="true"
@select="select"
@select-all="selectAll"
@selection-change="selectionChange"
ref="multipleTable"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
:header-cell-style="{textAlign:'center'}"
:cell-style="{textAlign:'center',height:'57px',padding: '0'}"
>
<el-table-column type="selection"></el-table-column>
<el-table-column prop="title" label="位置"></el-table-column>
<el-table-column prop="money" label="价格"></el-table-column>
<el-table-column prop="beigao" label="碑高"></el-table-column>
<el-table-column prop="caizhi" label="材质"></el-table-column>
<el-table-column prop="leixing" label="类型"></el-table-column>
<el-table-column prop="xiangkou" label="向口"></el-table-column>
<el-table-column prop="baohuxiang" label="墓穴"></el-table-column>
<el-table-column prop="img" label="状态">
<template v-slot:default="scope">
<el-image :src="scope.row.img" style="width:40px;height:40px;"/>
</template>
</el-table-column>
<el-table-column fixed="right" label="操作" width="100">
<template slot-scope="scope">
<el-button @click="handleAdd(scope.row)" type="text" size="small"
>新增</el-button
>
<el-button @click="handleClick(scope.row)" type="text" size="small"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
</div>
</template>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2.7.13/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui@2.15.10/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data() {
return {
maps: new Map(),
tableData: [
{
id: 1,
parentId: 0,
title: '1号',
money: 17800,
beigao: 500,
caizhi: "花岗岩",
leixing:"卧式碑",
xiangkou:"丑山未",
baohuxiang:"双人穴",
img:"/public/static/hqy/images/kong.png",
},
{
id: 2,
parentId: 0,
title: '2号',
money: 17800,
beigao: 500,
caizhi: "花岗岩",
leixing:"卧式碑",
xiangkou:"丑山未",
baohuxiang:"双人穴",
img:"/public/static/hqy/images/kong.png",
},
{
id: 3,
parentId: 0,
title: '3号',
money: 17800,
beigao: 500,
caizhi: "花岗岩",
leixing:"卧式碑",
xiangkou:"丑山未",
baohuxiang:"双人穴",
img:"/public/static/hqy/images/kong.png",
hasChildren: true,
/*children: [
{
id: 31,
parentId: 3,
title: '3-1号',
money: 17800,
beigao: 500,
caizhi: "花岗岩",
leixing:"卧式碑",
xiangkou:"丑山未",
baohuxiang:"双人穴",
img:"/public/static/hqy/images/kong.png",
children: [
{
id: 311,
parentId: 31,
title: '3-1-1号',
money: 17800,
beigao: 500,
caizhi: "花岗岩",
leixing:"卧式碑",
xiangkou:"丑山未",
baohuxiang:"双人穴",
img:"/public/static/hqy/images/kong.png",
},
{
id: 312,
parentId: 31,
title: '3-1-2号',
money: 17800,
beigao: 500,
caizhi: "花岗岩",
leixing:"卧式碑",
xiangkou:"丑山未",
baohuxiang:"双人穴",
img:"/public/static/hqy/images/kong.png",
}
]
},
{
id: 32,
parentId: 3,
title: '3-2号',
money: 17800,
beigao: 500,
caizhi: "花岗岩",
leixing:"卧式碑",
xiangkou:"丑山未",
baohuxiang:"双人穴",
img:"/public/static/hqy/images/kong.png",
hasChildren: true,
}
]*/
},
{
id: 4,
parentId: 0,
title: '4号',
money: 17800,
beigao: 500,
caizhi: "花岗岩",
leixing:"卧式碑",
xiangkou:"丑山未",
baohuxiang:"双人穴",
img:"/public/static/hqy/images/kong.png",
}
]
}
},
created() {},
methods: {
setChildren(children, type) {
// 编辑多个子层级
children.map(j => {
this.toggleSelection(j, type)
if (j.children) {
this.setChildren(j.children, type)
}
})
},
// 选中父节点时，子节点一起选中取消
select(selection, row) {
const hasSelect = selection.some(el => {
return row.id === el.id
})
if (hasSelect) {
if (row.children) {
// 解决子组件没有被勾选到
this.setChildren(row.children, true)
}
} else {
if (row.children) {
this.setChildren(row.children, false)
}
}
},
toggleSelection(row, select) {
if (row) {
this.$nextTick(() => {
this.$refs.multipleTable &&
this.$refs.multipleTable.toggleRowSelection(row, select)
})
}
},
// 选择全部
selectAll(selection) {
// tabledata第一层只要有在selection里面就是全选
const isSelect = selection.some(el => {
const tableDataIds = this.tableData.map(j => j.id)
return tableDataIds.includes(el.id)
})
// tableDate第一层只要有不在selection里面就是全不选
const isCancel = !this.tableData.every(el => {
const selectIds = selection.map(j => j.id)
return selectIds.includes(el.id)
})
if (isSelect) {
selection.map(el => {
if (el.children) {
// 解决子组件没有被勾选到
this.setChildren(el.children, true)
}
})
}
if (isCancel) {
