今天

1，搭建后台框架

2.周会

3.继续 后台公司列表

4.操作按钮 添加模态框 和跳转，拖拽排序改变index,添加分页

5. 安装axios ，看api ，写例子

6.学习 websocket

收获：

仅仅根据后台某个顺序 来对表格排序的话

需将sortable设置为custom，同时在 Table 上监听sort-change事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。

<el-table :data="tableData" border style="width: 100%" stripe ref="multipleTable" tooltip-effect="dark" @sort-change='sortChange'>

  <el-table-column sortable='custom' label="公司列表">

sort-change方法自带三个参数，分别代表意义是：

column：当前列

prop：当前列需要排序的数据

order：排序的规则（升序、降序和默认[默认就是没排序]）

column.order是可以经过点击排序按钮后拿到的，然后就可以发送column.order给后台，后台再根据什么排序来返回排序过后的数据。

在做拖动排序的时候：

传统的拖动效果，都是基于通过 mousedown、mousemove、mouseup 事件来修改删减 dom 节点

但 Vue 是一个数据驱动的前端框架，开发时应尽量避免操作 dom

而且 Element-UI 的 Table 组件封装得很严谨，直接操作 dom 很容易产生不可预计的 bug

<li v-for="article in articles" @click="getDescribe(article.id)">

这里删除携带id ，有3种方法 可以获取当前li的id

1.

      getDescribe(id) {
//   直接调用$router.push 实现携带参数的跳转
        this.$router.push({
          path: `/describe/${id}`,

对应 路由配置

{
  path: '/describe/:id',
    name: 'Describe',
  component: Describe
}

子组件中获取参数：

this.$route.params.id

2.

通过路由属性中的name来确定匹配的路由，通过params来传递参数

this.$router.push({
  name: 'Describe',
  params: {
    id: id
  }
})

对应路由配置: 注意这里不能使用:/id来传递参数了，因为父组件中，已经使用params来携带参数了。

{
  path: '/describe',
    name: 'Describe',
  component: Describe
}

子组件获取参数

this.$route.params.id

3.使用path来匹配路由，然后通过query来传递参数这种情况下 query传递的参数会显示在url后面?id=？

this.$router.push({
  path: '/describe',
  query: {
    id: id
  }
})

路由

{
  path: '/describe',
    name: 'Describe',
  component: Describe
}

子组件获取参数

this.$route.query.id

明天：

1.刷新页面保存状态

2，删除，解冻成功后，分页点击后局部刷新页面

3.看侧边栏如何动态生成