{floorId: 10}
],
floorNum: '',
// 第1层 默认选择的排数 和 列数
row1: 1,
col1: 1,
// 第2层 默认选择的排数 和 列数
row2: 1,
col2: 1,
// 第3层 默认选择的排数 和 列数
row3: 1,
col3: 1,
// 第4层 默认选择的排数 和 列数
row4: 1,
col4: 1,
// 第5层 默认选择的排数 和 列数
row5: 1,
col5: 1,
activeColor: 'green',
colPos: '',
rowPos: '',
rowDataList1: [{ // 默认给一个对象,即默认状态是 1行数据
id: Math.ceil(Math.random()*100)
}],
colDataList1: [
{id: '1'}
],
}
},
methods:{
col1Change(){
// 每触发一次，清空数据
this.colDataList1 = [{id: '1'}];
// 取得 选中的第一层的第一排的数值
let len = this.col1;
if(len > 1){
for (let i = 2; i <= len; i++){
this.colDataList1.push({id: i + ''});
}
return this.colDataList1;
}else{
return this.colDataList1;
}
},
row1Change(){
// 每触发一次，清空数据
this.rowDataList1 = [{ id: Math.ceil(Math.random()*100)}];
let len = this.row1;
if (len > 1){
for (let i = 2; i <= len ; i++){
this.rowDataList1.push({id: Math.ceil(Math.random()*100) + i});
}
return this.rowDataList1;
}else {
return this.rowDataList1;
}
},
handleClick(row, col, index) {
// console.log(JSON.stringify(row));
// console.log(JSON.stringify(col));
// console.log("点击的cell 行数: " + JSON.stringify(index)); // index 是 行数，0 表示第一行，从 0 开始
// 一点击获取 行纵坐标
this.colPos = col;
this.rowPos = index;
},
cellStyle({row, column, rowIndex, columnIndex}){
// console.log(JSON.stringify(row))
// console.log(JSON.stringify(column))
// console.log("要渲染的行数: " + JSON.stringify(rowIndex))
// console.log(JSON.stringify(columnIndex))
if(rowIndex == 0 && columnIndex == 0){
return '';
}else {
if(rowIndex == this.rowPos && columnIndex == this.colPos){ //指定坐标
return 'background: pink';
}else{
return '';
}
}
},
}
});
</script>
</body>
</html>
为了方便大家直接使用理解，我这里使用的脚本等都是在线链接，确保大家直接 down 下来就能运行处效果的。
效果图
