Vue中的slot-scope=“scope“

﹏ヽ暗。殇╰゛Y 2022-10-22 12:56 241阅读 0赞

背景：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70]  
点击右边标签生成左边表格的一条数据，表格中左边两列是标签自带的数据（后端数据），表格右边两列字段是前端新加的（用户新输入的），提交时要将整条数据都提交给后端，用到插槽：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 2]  
输入完毕后，打印表格数据：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 3]  
可以看到新加的两个字段已经在tableData中的每一条row中了，并且可以通过scope.row.字段名，获取到。  
附录

<template>
      <el-table :data="tableData" style="width: 100%">
        //---:data="用于存放请求数据回来的数组"
        <el-table-column label="索引值" width="400">
          <template slot-scope="scope">
            //--- 这里取到当前单元格
            <span>{
       { scope.$index }}</span>//--- scope.$index就是索引
          </template>
        </el-table-column>
        <el-table-column label="标题" width="350">
          <template slot-scope="scope">
            //--- 这里取到当前单元格
            <span>{
       { scope.row.title }}</span>
            //--- scope.row 直接取到该单元格对象，就是数组里的元素对象，即是tableData[scope.$index]
            //---.title 是对象里面的title属性的值
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            //--- 这里取到当前单元格
            <el-dropdown size="medium" split-button type="primary">
              更多
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native.prevent="handleEdit(scope.$index, scope.row)">
                  编辑
                </el-dropdown-item>
                <el-dropdown-item @click.native.prevent="getUp(scope.$index, scope.row)">
                  上升
                </el-dropdown-item>
                <el-dropdown-item @click.native.prevent="getDown(scope.$index, scope.row)">
                  下降
                </el-dropdown-item>
                <el-dropdown-item @click.native.prevent="handleDelete(scope.$index, scope.row)">
                  删除
                </el-dropdown-item>
                //---这里的点击事件已经不是在根元素上了，因为多套了几层结构。
                //---这里的点击事件如果没有加上 .native 则点击无效！
                //---这里的点击事件要加上 .native 表示监听组件根元素的原生事件。
                //---这里的点击事件不需要 .prevent 也可以实现相同效果
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
    </template>
    
    <script>
    export default {
      data () {
        return {
          tableData: [{ title: 123, age: 11 }, { title: 456, age: 18 }]
          // ---为了效果先给值，一般情况下为空，其实际值是后台接口请求回来的
        }
      },
      methods: {
        handleDelete (index, row) {
          this.tableData.splice(index + 1, 1)// ---前端删除index要+1 !!!!!!!
          // ---下面是后端数据删除，可以不看
          axios.post(config.newsDelete, // ---后端数据删除
            {
              id: row.id// ---传入被删除的对象的id值
            },
            {
              headers: {
                Authorization: 'Bearer ' + sessionStorage.getItem('token')// ---请求头验证
              }
            }
          )
            .then((res) => {
              this.rendering()// ---删除了重新渲染
            })
        }
      }
    }
    </script>
    
    <style>
    
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70]: /images/20221022/f991a15c67cb4c688416a238102b7241.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 1]: /images/20221022/65e5d079d45d4c988c719c9b283bb352.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 2]: /images/20221022/eeed6b8b1536467c948830e27eee033b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3MjE2OQ_size_16_color_FFFFFF_t_70 3]: /images/20221022/e170c7c9e5d141cbb6e946d51db2cae7.png