使用Element (vue从2.4迁移到2.5的坑)

简介

后台系统觉得饿了么的Element的UI还不错，于是打算开始使用Element做，使用这套UI框架的时候，下载下来的UI框架版本是2.0.8，在使用他的Table组件的时候发现slot-scope在vue2.4版本不支持，于是将Vue升级到2.5.9最新版本。

Element的Table组件(截图上传不了，可去官网查看)

<template>
  <el-table
    :data="tableData4"
    style="width: 100%"
    max-height="250">
    <el-table-column
      fixed
      prop="date"
      label="日期"
      width="150">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="province"
      label="省份"
      width="120">
    </el-table-column>
    <el-table-column
      prop="city"
      label="市区"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      width="300">
    </el-table-column>
    <el-table-column
      prop="zip"
      label="邮编"
      width="120">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="120">
      <template slot-scope="scope">
        <el-button
          @click.native.prevent="deleteRow(scope.$index, tableData4)"
          type="text"
          size="small">
          移除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    methods: {
      deleteRow(index, rows) {
        rows.splice(index, 1);
      }
    },
    data() {
      return {
        tableData4: [{
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-08',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-06',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-07',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }]
      }
    }
  }
</script>

升级后新问题

升级vue后发现新问题，多选单选不能使用了，看了下代码，由于习惯性一直没找出来，后面才发现，vue2.4升级到vue2.5.9后watch方法也有所变化.

vue2.4.0还可以这样:

watch:{
  data: {
       handler: function(val, oldVal) {
        console.log("改变后的新值为:"+val);
        console.log("改变前的旧值为:"+oldVal);
      },
      deep:true
  }
}

而vue2.5.9这样完全监控不到，只能改为：

watch:{
  data(val, oldVal): {
        console.log("改变后的新值为:"+val);
        console.log("改变前的旧值为:"+oldVal);
  }
}

碰到同样问题的希望这篇文章可以帮你解决问题。工作随笔记载