vue项目第六天

历史记录组件触发 连带menu组件路由同步

修改菜单 默认激活的路由。

历史记录路由如果当前路由在最后一个位置，删除则自动向前移位。

解决第一个小bug，点击tab高亮之后路由不跳

点击最后一个tab删除，修改了menuid，同步路由跳转

点击删除将tab删空，让导航跳转到系统首页

分析项目路由界面的结构

---

三部分组成

1.form表单
2.table表格数据
3.数据分页

分装form表单组件

---

封装组件使用无名和具名插槽可以实现form动态效果

定义该组件的插槽

定义form表单格式数据

---

  formInline: [
        {
          name: "用户名",
          ele: "input",
          key: "name",
        },
        {
          name: "爱好",
          ele: "select",
          key: "hobby",
          options: [
            { value: "1", label: "篮球" },
            { value: "2", label: "足球" },
            { value: "3", label: "羽毛球" },
          ],
        },
      ],

根据格式进行动态渲染

根据form表单数据格式进行form数据整理

封装table表格组件

---

分析复用table，table数据源来自父组件，所以需要使用父子传值方案：props定义属性接收。

props基本使用方案
props:['tableData'],

//根据分析修改props定义方案
 props:{
    tableData:{
        type:Array,
        default:[]
    }
  },
  写成上面的default:[] 格式之后 会报错

分析tablecolumn 中列存在复用，需要将列的标题属性在使用props进行传递

在设置table 复选之后，操做复选事件，需要触发当前自定义组件的自定义事件

触发自定义事件需要在当前组件内部使用$emit 触发

table表格数据列渲染数据或者标签

---

模拟官方实现

在父组件中给封装组件对应位置设置插槽内容

以上写法，只是实现td列添加标签

如果在插槽里面需要使用当前table表格数据。（当前行数据）

table表格内部插槽位置不确定，插槽位置不固定。

先调整封装的table的字段（key键值）

父组件中 自定义的table组件  key值调整格式
 :tdKey="[{ key: 'date' }, { key: 'name', slot: true }, { key: 'address' }]"

注意在elementui 库table组件中，el-table-column内部不能直接使用插槽。而是调整为谁需要插槽给谁设置插槽。

封装数据分页组件

---

将自定义的table和分页组件合并

实现最终效果

见代码。

mytable组件，分页也写在这个组件中和表格是一体的

然后渲染在user页面展示组件中