slot-scope=“text, record“

element的修改和删除行间拿数据 ------------------id-------------------------------------

 <template slot-scope="scope">
              <el-button
                type="text"
                @click="$router.push(`/addclass?cid=${scope.row.id}`)"
                >修改</el-button
              >
              &nbsp;
              <!-- <el-button type="text">删除</el-button> -->
              <el-popover
                placement="top"
                width="160"
                v-model="scope.row.isShowPopover"
              >
                <p>确定删除该条数据吗?</p>
                <div style="text-align: right; margin: 0">
                  <el-button
                    size="mini"
                    type="text"
                    @click="scope.row.isShowPopover = false"
                    >取消</el-button
                  >
                  <el-button
                    type="primary"
                    size="mini"
                    @click="delClass(scope.row)"
                    >确定</el-button
                  >
                </div>
                <el-button
                  type="text"
                  style="margin-left: 5px"
                  class="del-slot-btn user-list-operate"
                  slot="reference"
                >
                  删除
                </el-button>
              </el-popover>
    
      </template>

    delClass(item) {
      let fd = new FormData();
      fd.append("id", item.id);
      this.axios.post("/index/teacher_course_del", fd).then((res) => {
        console.log(res);
        if (res.data.code === 0) {
          this.$message({
            type: "success",
            message: res.data.msg,
          });
          this.LessonList = this.LessonList.filter((ele) => {
            return ele.id !== item.id;
          });
        } else {
          this.$message({
            type: "error",
            message: res.data.msg,
          });
        }
      });
    },



andv的修改和删除行间拿数据------------------------id----------------------------------

const columns = [
  {
    title: "操作",
    dataIndex: "operation",
    key: "operation",
    ellipsis: true,
    width: 120,
    align: "center",
    scopedSlots: { customRender: "operation" },
  },
];

        <template slot="operation" slot-scope="text, record">
          <a>
            <span @click="showModal(record.id)" v-if="record.id !== 1">
              编辑</span
            >
            <!-- 删除弹框 -->
            <a
              style="margin-left: 30px"
              @click="delModal(record.id)"
              v-if="record.id !== 1"
            >
              删除</a
            >
          </a>
        </template>

    //点击删除
    delModal(id) {
      this.del_id = id;
    },
    //确认删除
    delOk() {
      let fd = new FormData();
      fd.append("id", this.del_id);
      this.axios.post("/home/company_del", fd).then((res) => {
        if (res.data.code == 0) {
          this.$message.success(res.data.msg);
          this.delShow = false;
          this.getUnitList();
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: slot-scope="text, record"是Vue.js中的一个指令,用于在父组件中向子组件传递数据。它允许子组件在插槽中访问父组件中的数据,并将其用作插槽内容的一部分。其中,textrecord是父组件中的数据对象,可以在子组件中使用。 ### 回答2: 在Vue.js中,slot-scope用于在父组件中重用子组件中的某些数据和逻辑。slot-scope允许您将子组件中的数据和方法绑定到父组件中的作用域中。 具体来说,slot-scope属性允许父组件将子组件中定义的数据和方法作为普通属性和方法使用。例如,如果一个子组件中定义了一个名为text的属性和一个名为record的方法,父组件可以使用slot-scope="text, record"将这些属性和方法传递到插槽中,并在插槽中使用它们。 这种技术非常有用,因为它可以使您重用代码和逻辑,并使父组件更加清晰和易于维护。此外,使用slot-scope可以将子组件中的大量修饰符、指令和事件处理程序抽象出来,从而使子组件更加可复用和灵活。 总之,使用slot-scope="text, record"可以将子组件中的数据和方法绑定到父组件中的作用域中,从而使其重用于不同的上下文中。此功能非常有用,尤其对于大型应用程序和复杂组件特别有效。 ### 回答3: slot-scopeVue.js的一种特殊语法,用于将子组件的数据传递到父组件中进行处理。其中,slot-scope="textrecord"是其中的一种使用方式。 在使用中,slot-scope="textrecord"定义了两个变量textrecord,它们分别代表子组件中的文本内容和数据。例如,一个表格组件中,我们可以将每一行数据渲染成一个子组件,通过slot-scope将每一行的数据传递给父组件中进行处理。 在父组件中,我们使用v-slot指令来接收子组件传递的数据。例如,我们可以这样使用: <template>   <table>     <thead>       <tr>         <th>ID</th>         <th>Name</th>         <th>Age</th>       </tr>     </thead>     <tbody>       <my-row v-for="(item, index) in data" :key="index" :record="item" v-slot="scope">         <tr>           <td>{{ index }}</td>           <td>{{ scope.record.name }}</td>           <td>{{ scope.record.age }}</td>         </tr>       </my-row>     </tbody>   </table> </template> 在上面的代码中,my-row是一个渲染行数据的子组件,我们使用v-for指令循环渲染每一行数据,并将每一行数据通过:record="item"传递给子组件。在子组件中,我们使用slot-scope="textrecord"指令来接收传递过来的数据,并将其通过v-slot指令传递给父组件中。在父组件中,我们使用scope.record来访问接收到的数据。 这种使用方式不仅可以用于渲染表格数据,还可以用于其他需要动态渲染数据的场景,它大大增强了组件之间的通信能力,使得组件的复用性更加灵活。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值