vue改错总结

vue表单和表格一起使用的时候，表格里非编辑框不再使用v-model进行双向数据 绑定，当tabledatase的数据发生变化时候，会自动渲染新的数据，但是可便捷table单元格需要用到插槽技术，当更新name的时候才会 自动渲染

<template>
  <div>
    <el-form :model="form">
      <el-table :data="tableData" style="width: 100%">
      
        <el-table-column prop="name" label="员工姓名">
          <template slot-scope="scope">
            <el-input v-model="scope.row.name"></el-input>
          </template>
        </el-table-column>
        
        
      </el-table>
      <el-button type="text" size="small" @click="handleSendDataToBackend()">综合评估</el-button>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {}, 
      tableData: [
        { id: 1, name: '张三' },
        { id: 2, name: '李四' },
       
      ],
    };
  },
  methods:{
    handleSendDataToBackend(){
     console.log(this.tableData)
    }
  }
};
</script>

两个vue界面 传值，在原页面里定义方法，方法里调用router的push方法携带参数传值，我在表格的最后一列定义了一个点击事件，点击该按钮可以携带数据跳转

表格最后一列：

<el-table-column label="操作" width="100">
        <template #default="{ row }">
          <el-button type="text" size="small" @click="handleSendDataToBackend(row)">综合评估</el-button>
        </template>
      </el-table-column>

在原页面的method里实现该方法：

navigateToComAsses(row) {
      console.log(row)
      this.$router.push({ name: 'ComAsses', params: { data: row } });
    },

然后很重要的一点是index.js（router里）需要设置好组件名和你跳转的路径，其中路径你随意，但是在index.js里组件的name值就是标红的地方

{
        path: '/menu/ComAsses/:data',
        name: 'ComAsses',
        component: ComAsses,
      },
      

然后就是在目标页面接收参数，调用钩子函数接受，定义一个空的集合，这个集合就是你的数据源，例如你表格的 :data=“***”其中*的把内容

   data(){
            return{
                originalTableData: [],
                displayedTableData: [],
            }
        },
 
    created(){
        
        this.displayedTableData = [this.$route.params.data];
        console.log(this.displayedTableData)
        
    }

这里有个很容易出错的点就是标注位置，解释一下这一行，this.$route.params.data就是在发送参数的时候那个params:data的内容，相当与键值对，params是集合名称，data是键，row是值，，所以this.$route.params.data

就等于row，这是一行数据，其内容是一个集合，类似于{id：‘***’,name: '****'}这个样子，如果要把这一行数据展示到表格里，那么就必须在前面就一个中括号，也就是说相当于把row当做一个集合，就变成了[{}]这么个格式。

这里很容易被忽略。