Vue+Element UI 向Table組建中的每一行新增一個switch元件,實現每一行單獨控制
阿新 • • 發佈:2018-12-11
最近在做公司的裝置管理系統,許可權管理中有一個需求需要展示如下:
每一行表格中的switch單獨控制一行;
實現效果的程式碼如下:
<el-table :data="userRights" stripe border align="center" style="width: 100%;"> <el-table-column prop="id" label="許可權編號" align="center" width="80"> </el-table-column> <el-table-column prop="name" label="許可權名稱" align="center" width="180"> </el-table-column> <el-table-column prop="describe" align="center" label="許可權描述"> </el-table-column> <el-table-column property="status" align="center" label="許可權狀態"> <template slot-scope="scope"> <el-switch active-color="#13ce66" inactive-color="#ff4949" v-model="scope.row.status" @change=change(scope.$index,scope.row)> </el-switch> </template> </el-table-column> </el-table>
備註:在第一次使用時,我將slot-scope="scope"寫成 scope="scope"執行起來之後沒有報錯,但是會有warning警告;提示資訊如下:
(Emitted value instead of an instance of Error) the "scope" attribute for scoped slots have been deprecated and replaced by "slot-scope" since 2.5. The n
ot-scope" attribute can also be used on plain elements in addition to <template> to denote scoped slots.
檢查下列表元件,slot 裡的 <template> 上面有個 scope 屬性,改成 slot-scope
<template scope="scope">
改成
<template slot-scope="scope">
查詢問題的原因是:
scope用於表示一個作為帶作用域的插槽的 <template>
元素,它在 2.5.0+ 中被 slot-scope
替代。
除了 scope
只可以用於 <template>
slot-scope
都相同。