element 树形表格 列内全选、input同步更改、筛选

需求:树形表格、列内全选/反选。input同步更改数据，筛选数据

效果图：

table组件

export default {

name: "l-TableCompont",

data() {

return {

arrFin:{jg:[],ll:[],qt:[],kcts:[]}

};

},

props: {

tableData: {

type: Array,

default () {

return [

{

id: 1,

date: "2016-05-02",

name: "王小虎",

province: "山西",

city: "平遥",

indeterminate:{name:false,address:false,province:false,city:false},

checked:{name:false,address:false,province:false,city:false},pid:null,

address: "上海普陀区金沙江路 1518 弄",zip: 200333,

speed:"30%"

},

{

id: 2,

date: "2016-05-04",

province: "山东",

city: "济南",

indeterminate:{name:false,address:false,province:false,city:false},

name: "王小虎",checked:{name:false,address:false,province:false,city:false},pid:null,

address: "上海普陀区金沙江路 1517 弄",zip: 200333,speed:"30%"

},

{

id: 3,

date: "2016-05-01",

province: "四川",

city: "成都",

indeterminate:{name:false,address:false,province:false,city:false},

name: "王小虎",checked:{name:false,address:false,province:false,city:false},pid:null,

address: "上海普陀区金沙江路 1519 弄",zip: 200333,speed:"30%",

children: [

{

id: 31,

date: "2016-05-099",

pid:3,

province: "天津",

city: "滨海",

indeterminate:{name:false,address:false,province:false,city:false},

name: "王小虎",checked:{name:false,address:false,province:false,city:false},

address: "上海普陀区金沙江路 1519 弄",zip: 200333,speed:"30%",

children:[

{

id: 311,

date: "2016-05-0999",

pid:31,

indeterminate:{name:false,address:false,province:false,city:false},

province: "北京",

city: "朝阳",

name: "王小虎",checked:{name:false,address:false,province:false,city:false},

address: "上海普陀区金沙江路 1519 弄",zip: 200333,speed:"30%"

}

]

},

{

id: 32,

date: "2016-05-098",

pid:3,

province: "南京",

city: "普陀",

indeterminate:{name:false,address:false,province:false,city:false},

name: "王小虎",checked:{name:false,address:false,province:false,city:false},

address: "上海普陀区金沙江路 1519 弄",zip: 200333,speed:"30%"

},

],

},

{

id: 4,

date: "2016-05-03",

indeterminate:{name:false,address:false,province:false,city:false},

name: "王小虎",checked:{name:false,address:false,province:false,city:fals},pid:null,

address: "上海市普陀区金沙江路 1516 弄",

zip: 200333,

province: "南京",

city: "普陀",speed:"30%"

},

{

id:54,

date: "2016-05-08",

name: "王小虎",

province: "上海",

indeterminate:{name:false,address:false,province:false,city:false},

city: "普陀区",checked:{name:false,address:false,province:false,city:false},pid:null,

address: "上海市普陀区金沙江路 1518 弄",

zip: 200333,speed:"30%",

children: [

{

id: 51,

date: "2016-05-099",

pid:3,

province: "天津",

city: "滨海",

indeterminate:{name:false,address:false,province:false,city:false},

name: "王小虎",checked:{name:false,address:false,province:false,city:false},

address: "上海市普陀区金沙江路 1519 弄",zip: 200333,speed:"30%",

children:[

{

id: 511,

date: "2016-05-0999",

pid:31,

indeterminate:{name:false,address:false,province:false,city:false},

province: "北京",

city: "朝阳",speed:"30%",

name: "王小虎",checked:{name:false,address:false,province:false,city:false},

address: "上海市普陀区金沙江路 1519 弄",zip: 200333,

}

]

},

],

},

{

id:45,

date: "2016-05-06",

indeterminate:{name:false,address:false,province:false,city:false},

name: "王小虎",checked:{name:false,address:false,province:false,city:false},pid:null,

province: "上海",

city: "普陀区",

address: "上海市普陀区金沙江路 1518 弄",

zip: 200333,

},

{

id:44,

date: "2016-05-07",

indeterminate:{name:false,address:false,province:false,city:false},

name: "王小虎",checked:{name:false,address:false,province:false,city:false},pid:null,

province: "上海",

city: "普陀区",

address: "上海市普陀区金沙江路 1518 弄",

zip: 200333,

},

]

}

},

colData:{

type:Array,

default(){

return [

{ name: "日期", prop: "date" },

{ name: "姓名", prop: "name" },

{ name: "地址", prop: "address",

children:[

{ name: "省份", prop: "province" },

{ name: "城市", prop: "city" },

{ name: "环比增速", prop: "speed" },

]},

{ name: "zip", prop: "zip" },

]

},

},

// arrFin:{

// type:Object,

// default(){

// return {name:[],address:[],date:[],province:[],city:[]}

// }

// },

allChecked:{

type:Object,

default(){

return {jg:false,ll:false,qt:false,kcts:false}

}

},

},

computed: {

},

mounted() {

this.setParentForLeaves(this.tableData)

},

beforeDestroy() {

window.removeEventListener("resize", () => {

clearTimeout(this.timer);

});

},

watch:{

// tableData:{

// handler(newval){

// console.log(newval,"tableData--newval")

// },

// deep:true,

// immediate:true

// },

},

methods: {

selectionChange(select){

console.log(select,"selectselectselect")

},

filterChange(filters,a){

console.log(filters,a,"filters")

// this.$emit("filtersChange",filters)

for(let i in this.allChecked){

this.allallall(this.tableData,i,false)

}

this.arrFin = {jg:[],ll:[],qt:[],kcts:[]}

},

// 表头全选框

allSelect(val){

console.log(val,"allSelect--val")

this.allallall(this.tableData,val,this.allChecked[val])

this.tableData.forEach(item=>{

let obj={row:item,column:{property:val}}

this.checkChange(obj,true)

})

},

headeRrowStyle({row, column, rowIndex, columnIndex}){

// console.log(row, column, rowIndex, columnIndex,"row, column, rowIndex, columnIndex")

if(column.children)return "background:#3965C2;border:0;font-size:14px;color:#fff;font-weight:bold;"

if(rowIndex == 0)return 'background:#3965C2;font-size:14px;color:#fff;font-weight:bold;border:0'

if(rowIndex == 1)return 'background:#3965C2;font-size:12px;color:#fff;padding:2px 0;border:0'

return ""

},

checkedShow(scope){

if(scope.row.checked[scope.column.property] == undefined)return false

return true

},

speedShow(scope){

return scope.column.label.toString().indexOf('速')!=-1

},

// 表头全选

allallall(root,val,bool){

let innerLoop = (item) => {

this.$set(item.checked,val,bool);

if (item.children instanceof Array) {

item.children.forEach((child) => {

this.$set(child.checked,val,bool);

innerLoop(child);

});

}

};

root.forEach(item=>innerLoop(item))

return root

},

// 关联父子元素

setParentForLeaves(root) {

// 递归改变所有子节点的值

let innerLoop = (item) => {

if (item.children instanceof Array) {

item.children.forEach((child) => {

this.$set(child, "parent", item);

innerLoop(child);

});

}

};

root.forEach(item=>innerLoop(item))

return root

},

//

inputHandler(scope){

let property = scope.column.property

if(!scope.row.checked[property])return

console.log(this.arrFin,"this.arrFin")

let arr = this.arrFin[property]

for(let i in arr){

if(arr[i] && !arr[i].length){

arr[i][property]=scope.row[property]

}

if(arr[i] && arr[i].children){

for(let j in arr[i].children){

arr[i].children[j][property]=scope.row[property]

}

}

}

},

// 查找一级表格是否全选

searchAllcheck(property){

return this.tableData.every(item=>{

return item.checked[property]==true

})

},

checkChange(scope,bool){

console.log(scope,"scope------------")

let paramProperty = scope.column.property

// // 取消表头全选

// if(!bool)this.allChecked[paramProperty]=false

// // 设置表头全选

// if(this.searchAllcheck(paramProperty))this.allChecked[paramProperty]=true

let arr = this.arrFin[paramProperty]

let children = scope.row.children

let checkeds = scope.row.checked[paramProperty]

//选中子集

if(scope.row.children){

var cb = function(list,checked){

arr.indexOf(list)==-1? arr.push(list):arr.splice(arr.indexOf(list),1)

for(var i =0;i

list[i].indeterminate[paramProperty] = false

list[i].checked[paramProperty] = checked

arr.indexOf(list[i])==-1? arr.push(list[i]):arr.splice(arr.indexOf(list[i]),1)

if(list[i].children){

cb(list[i].children,checked)

}

}

}

cb(children,checkeds);

}

scope.row.indeterminate[paramProperty] = false

arr.indexOf(scope.row)==-1? arr.push(scope.row):arr.splice(arr.indexOf(scope.row),1)

this.selectAllParent(scope.row,paramProperty,arr)

},

// 父级全选/反选

selectAllParent(node,property,arr) {

if(!node.parent || property==undefined)return;

let selectedItems = node.parent.children.filter(item=>(item.checked[property]!==false)).length

if(selectedItems === node.parent.children.length){

node.parent.checked[property] = true

arr.indexOf(node.parent)==-1? arr.push(node.parent):arr.splice(arr.indexOf(node.parent),1)

if(node.parent.parent){

arr.indexOf(node.parent.parent)==-1? arr.push(node.parent.parent):arr.splice(arr.indexOf(node.parent.parent),1)

}

// console.log(this.arrFin,"vvvvvv")

}else{

node.parent.checked[property] = false

arr.splice(arr.indexOf(node.parent),1)

}

// }

// 半选择中间态

if(selectedItems0){

node.parent.indeterminate[property] = true

}else{

node.parent.indeterminate[property] = false

}

if(node.parent.parent){

this.selectAllParent(node.parent,property,arr)

}

},

},

};

#l-tableCompont {

flex:1;

.el-input{

flex:1;

.el-input__inner{

border:0;

border-radius:20px;

background:#F9F3F3;

width:100%

}

}

.el-checkbox__input{

// line-height:41px

}

/deep/.el-icon-arrow-right:before {

content: "\e6d9";

font-size:14px;

// font-weight: bold;

}

/deep/.el-table__expand-icon--expanded .el-icon-arrow-right:before{

content: "\e6d8"!important;

font-size:14px;

// font-weight: bold;

}

/deep/.el-table__expand-icon--expanded {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

}

/deep/.el-table__expand-icon {

padding:0;

}

.el-table__footer-wrapper, .el-table__header-wrapper{

border-radius:10px 10px 0 0;

}

.el-table__fixed{

border-radius:10px 0 0 0

}

.el-table--border, .el-table--group{

border:0

}

.el-checkbox__input.is-checked+.el-checkbox__label{

color:#fff

}

}

父组件

//数据中必须有以下两个属性，对象内属性为有 选择框的 属性名

//indeterminate:{jg:false,ll:false,qt:false,kcts:false},

//checked:{jg:false,ll:false,qt:false,kcts:false},

:tableData="tableData"

:colData="colData" @filtersChange="filtersChange" :temFilterData="temFilterData">

v-for="(item,index) in colData1"

:key="item.prop+''+ index "

:prop="item.prop"

:label="item.name"

:column-key="item.prop"

:filters="[{text: '桂格', value: '桂格'}, {text: '不知道', value: '不知道'},{text: '嗯', value: '嗯'}]"

:filter-method="filterHandler"

fixed

align="center"

width="90"

show-overflow-tooltip

>

//

tableData:[{

id:1,

brand: '桂格',

child:"INSTANT",

spec:"70g",

SKU:"10 1478g",

city:"北京",

day:"180",

ycjx:"180",

jg:"30,10;25,20",

ll:"80",

qt:"23",

xs:200,

tbzs:30,

hbzs:20,

kcts:15,

fdjg:100,

ck15:100,

ck7:100,

sjkcl:100,

tjfhl:100,

bsdqk:50,

ztl:50,

wcl:100,

indeterminate:{jg:false,ll:false,qt:false,kcts:false},

checked:{jg:false,ll:false,qt:false,kcts:false},

},{

brand: '不知道',

child:"INSTANT1",

spec:"70g",

SKU:"10 1478g",

city:"北京",

day:"180",

ycjx:"180",

jg:"30,10;25,20",

ll:"80",

qt:"23",

xs:200,

tbzs:30,

hbzs:20,

kcts:15,

fdjg:100,

ck15:100,

ck7:100,

sjkcl:100,

tjfhl:100,

bsdqk:50,

ztl:50,

wcl:100,

indeterminate:{jg:false,ll:false,qt:false,kcts:false},

checked:{jg:false,ll:false,qt:false,kcts:false},

children:[{

brand: '不知道',

child:"INSTANT1",

spec:"70g",

SKU:"10 1478g",

city:"北京",

day:"180",

ycjx:"180",

jg:"30,10;25,20",

ll:"80",

qt:"23",

xs:200,

tbzs:30,

hbzs:20,

kcts:15,

fdjg:100,

ck15:100,

ck7:100,

sjkcl:100,

tjfhl:100,

bsdqk:50,

ztl:50,

wcl:100,

indeterminate:{jg:false,ll:false,qt:false,kcts:false},

checked:{jg:false,ll:false,qt:false,kcts:false}

},{

brand: '不知道',

child:"INSTANT1",

spec:"70g",

SKU:"10 1478g",

city:"北京",

day:"180",

ycjx:"180",

jg:"30,10;25,20",

ll:"80",

qt:"23",

xs:200,

tbzs:30,

hbzs:20,

kcts:15,

fdjg:100,

ck15:100,

ck7:100,

sjkcl:100,

tjfhl:100,

bsdqk:50,

ztl:50,

wcl:100,

indeterminate:{jg:false,ll:false,qt:false,kcts:false},

checked:{jg:false,ll:false,qt:false,kcts:false}

}]

},

{

brand: '嗯',

child:"INSTANT2",

spec:"70g",

SKU:"10 1478g",

city:"北京",

day:"180",

ycjx:"180",

jg:"30,10;25,20",

ll:"80",

qt:"23",

xs:200,

tbzs:30,

hbzs:20,

kcts:15,

fdjg:100,

ck15:100,

ck7:100,

sjkcl:100,

tjfhl:100,

bsdqk:50,

ztl:50,

wcl:100,

indeterminate:{jg:false,ll:false,qt:false,kcts:false},

checked:{jg:false,ll:false,qt:false,kcts:false}

}],

colData:[

// {name:"品牌",prop:"brand"},

// {name:"子品牌",prop:"child"},

// {name:"规格",prop:"spec"},

// {name:"SKU",prop:"SKU"},

// {name:"城市",prop:"city"},

{name:"过去30天销量参考",prop:"day"},

{name:"预测基线",

children:[{name:"(箱数)",prop:"ycjx"}]

},

{name:"价格/促销",prop:"jg"},

{name:"流量",prop:"ll"},

{name:"其他",prop:"qt"},

{name:"预测调整结果",

children:[

{name:"箱数",prop:"xs"},

{name:"同比增速",prop:"tbzs"},

{name:"环比增速",prop:"hbzs"}

]

},

{name:"安全库存天数",prop:"kcts"},

{name:"推荐KA库存量",

children:[

{name:"浮动结果",prop:"fdjg"},

{name:"15天参考",prop:"ck15"},

{name:"7天参考",prop:"ck7"}

]

},

{name:"实际KA库存量",prop:"sjkcl"},

{name:"推荐发货量",prop:"tjfhl"},

{name:"百事当前库存",prop:"bsdql"},

{name:"在途量",prop:"ztl"},

{name:"预期完成率",prop:"wcl"},

],

colData1:[

{name:"品牌",prop:"brand"},

{name:"子品牌",prop:"child"},

{name:"规格",prop:"spec"},

{name:"SKU",prop:"SKU"},

{name:"城市",prop:"city"},

],