有了女朋友后我为什么用三天才写了一行代码
这几点饱(bei)读(nue)vue代码,深以为vue可以代替基础的js、jquery带我飞;
然而被虐千千遍,下面根据试错和想法写一下要做的东西:
1.试过的错,铺成下次试错的路
这世上本来没有轮子,造的人多了,轮子也就多了 ——特斯拉夫斯基.港
这里是form表单效果
html
<el-form ref="form" label-width="100px">
<el-form-item label="数据源配置">
<!-- <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>-->
<div style="margin: 15px 0;"></div>
<div
v-for="(item, index) in equipments"
:key="index"
class="check-group"
>
<el-tag>{{ item.menu }}</el-tag>
<el-checkbox-group
v-model="checkedEquipments[index]"
@change="handleChange(item.id)"
>
{{ checkedEquipments[index] }}
<el-checkbox
v-for="data in item.childMenu"
:key="data.menu"
:label="data.id"
>
{{ data.menu }}
</el-checkbox>
</el-checkbox-group>
</div>
</el-form-item>
</el-form>
数据
isIndeterminate: true,
checkAll: false,
checkedEquipments: [], // 随意修改后的checked项(即要传到后台的变更数据)
equipments: [ // 所有数据
{
id: '1',
menu: 'table1',
childMenu: [{
id: '1-1',
menu: '字段一'
}, {
id: '1-2',
menu: '字段二'
}, {
id: '1-3',
menu: '字段三'
}, {
id: '1-4',
menu: '字段四'
}
]
},
{
id: '2',
menu: 'table2',
childMenu: [
{
id: '2-1',
menu: '字段1'
}, {
id: '2-2',
menu: '字段2'
}, {
id: '2-3',
menu: '字段3'
}, {
id: '2-4',
menu: '字段4'
}
]
}
],
checkEquip: [ // 模拟后台获取的数据(各el-checkbox-group默认checked项)
{
id: '1',
menu: 'table1',
childMenu: [
{
id: '1-1',
menu: '暖通一'
}, {
id: '1-2',
menu: '照明一'
}
]
}, {
id: '2',
menu: '设备2',
childMenu: []
}
]
// 方法
handleChange() {
this.checkEquipArr = []
const arr = this.checkedEquipments
for (let i = 0; i < arr.length; i++) {
const equipment = arr[i]
if (equipment.length > 0) {
const obj = {
id: this.equipments[i].id,
equips: []
}
for (let j = 0; j < equipment.length; j++) {
obj.equips.push(equipment[j])
}
this.checkEquipArr.push(obj)
}
}
console.log(this.checkEquipArr)
}
错误:Duplicate keys detected: ‘[object Object]’. This may cause an update error.
写了两个一样的for循环,绑定的key相同。
目前还存在的问题变成了子列表全部放到了每一行中,需要加判断或者筛选条件
接近成功了,使用了插槽获取对应行的数据
用插槽可以展示出来了
至此参考三部分
vue+elementui 动态获取数据 遍历循环 生成el-checkbox-group
vue+element-ui之 el-table组件中的理解和使用
Vue.js的条件v-if和列表循环v-for
Vue组件开发实践之scopedSlot的传递
关于插槽的更新:
新:作用域插槽
旧:带有 slot-scope 特性的作用域插槽
如何理解:
深入理解vue中的slot与slot-scope
贴出来现在模拟数据的代码:
优化功能一:初始化时候,默认全选:
<el-table
ref="multipleTable"
v-loading="listLoading"
:data="tables"
border
style="width: 100%"
@selection-change="handleSelectionChange"
@row-click="handleRowClick"
>
<el-table-column fixed type="selection" width="55" />
<el-table-column fixed prop="tablename" label="同步表" width="150" />
<el-table-column label="同步字段" width="500">
<template slot-scope="scope">
<el-form>
<!-- <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" border size="mini" @change="handleCheckAllChange">全选</el-checkbox>-->
<!-- <div style="margin: 15px 0;" />-->
<el-checkbox-group v-model="checkList">
<el-checkbox v-for="child in scope.row.childMenu" :key="child.id" :label="child['menu']" size="mini" text-color="#FF0000" />
</el-checkbox-group>
</el-form>
</template>
</el-table-column>
<el-table-column prop="rColumnList" label="任务ID" width="500" />
<el-table-column prop="address" label="任务描述" width="500" />
<el-table-column fixed="right" label="状态" width="150">
去查每一条的状态
<el-button type="success" size="small" @click="handleStatus(row)">执行状态</el-button>
<!-- <template slot-scope="scope">-->
<!-- <el-button type="text" size="small" @click="handleClick(scope.row)">查看</el-button>-->
<!-- <el-button type="text" size="small">编辑</el-button>-->
<!-- </template>-->
</el-table-column>
</el-table>
轮子的优化
Bug问题
需要先会在vue中实现form组件的append
map修改获取到的组装的结构:
// 塞数据
this.tableData.push({
id: i,
tablename: eachRow,
childMenu: this.rColumnList.map( // 内层数组重构
function(str, index) {
// console.log({ id: index, menu: str })
return { id: index, menu: str }
}
)
})
结构如下:
tableData为
[{
id: 0
tablename: “books”
childMenu:[
{id: 0, menu: ‘no_id’}
…
]
},
…
]
接下来,tableData作为一个对象。
用vue element的table的:data="tableData"接收作为表数据的填充,
常见的一列取对象对应的键值:
再往里面一层取对象某一个键的列表值:
想一下是借用tableData对象还是另外使用checklistgroup:{0: [‘books_0’, ‘books_1’, ‘books_2’], 1: [], 2: []},修改原来的多选框的效果
先用checklistgroup作为表格第二列(表字段列)的多选框选项支持的数据:
调整测试html部分
因为el-checkbox-group的v-modal绑定值是数组,因此在group外层控制的绑定数据就应该是对象,这样内层取到的就是数组
bug
checkbox group的v-modal绑定的值在修改后会变化,但是视图渲染却在鼠标移出表格才能生效。
无法更新视图
在@change方法里面添加
this.$set(this.tableData, index, row)