Onmyoji_XG的博客

原因是人员设置了固定列 fixed="left"但岗位没设置。但是岗位跑到人员后面了，奇怪，顺序不是这么设置的。第一列是序号，第二列是岗位，第三列是人员……截图有水印，不截图了。

原数据类似于children:[},{}},{}不包含 id:1 这样的具有标识性质的元素，这就需要自己创建这样的标识。

ant-design用惯了，想在element plus中也能使用labelInValue的方式同时获取label和value。能实现主要靠的是element plus支持value-key的写法。可以使用配置项直接配置labelInValue了。value绑定item就行啦。

表格内的单元格是可编辑的。点击增加增加一条数据，点击删除删掉本条数据。

传过来的参数的变化，并在需要关闭时使用emit方法，将visible设置成false，并告知父组件修改对应绑定的dialogVisible的值。这个弹窗是作为组件引入的，通过绑定dialogVisible，传参给子组件控制弹窗显隐。问题出在关闭时父组件将visible设置成false上，

可见响应式是多么好用，给它到处引用了好几次，仍然没有丢失其响应式，这就是响应式数组对它每一项成员的爱啊，这种行为好像父母在颠沛流离、风雨飘摇之中依然将自己的孩子护在羽翼之下。此时，当修改父组件form中的name时，子组件list中的name竟然也跟着变了。一是直接不把aaa设为响应式数据，反正它只是传给子组件展示用的，没有更改数据、同时需要及时更新页面的操作。哎，其实是form绑定的model数据，在回显赋值时，就已经成为响应式数据aaa的其中一员了。aaa在父组件中定义，并将数据传给了子组件。

这个表单是由数据项渲染的，使用数据渲染每一个el-form-item的prop，label等.解决方法就是不让它为空，就算是个空对象，空数组也行ref({})，不要是空值ref()这样导致了表单中应绑定的:model ，绑定了一个空值，这就是问题所在。他在编译过程中不会报错（这就体现ts的好用之处了）在表单校验时会报model空了的警告。正常显示表单项内容了。

去访问，语法是正确的（eslint不报错），但实际上访问不到，即表格第一行绑定的不是第一行，第二行绑定的不是第二行，不清楚它绑定的啥，但可以确定的是，它绑定的是一个固定的值，不能根据index变化。它是一个包含对象的数组，并且每个对象中都有type这个属性，所以可以使用这种语法tableData.${$index}.type。这样做的前提是，可以这么访问，毕竟，tableData.${$index}.type也太奇怪了吧！好在它不是数组，而是对象——为什么它是对象？第二种访问方式访问的是值，

其中data是表单绑定的数据，formItems是需要组件v-for渲染的内容，比如这里type是input，那就让组件渲染一个el-input组件。在数据项中包含了slot，表示使用插槽，就会在子组件中定义插槽的位置、显示父组件<template>模板中的内容，这个例子中插槽名叫selectPeople。formRef用来获取子组件、调用子组件的方法，需要注意的是，formRef必须等页面渲染完才能使用，即onMounted之后。其中:data即父组件向子组件传递的数据，包括需要渲染的内容和表单数据。

其中注释掉 "./src/**/*.js", 测试时，不可以跳到.js文件了，所以这个配置文件是生效的，只是.vue文件无法ctrl+鼠标划过蓝线跳转，好像识别不了？还有，路径不能及时排查错误，比如路径中@/api/sys等等中打错一个字，他不能检查出来，这是怎么回事啊，初步定位是配置文件的问题，解决中…下载完并在setting.json中按它指导配置就行，实现了ctrl+鼠标蓝线跳转至.vue文件。可是这样属于是我本地正常用，远程下载下来还是不能跳转的，哎，想用配置文件解决啊啊啊。