<template #default="{row}"> 是一个在 Vue.js 的模板中使用的语法,特别是在 Vue 的表格组件(如 Element UI 的 el-table)中。
这个语法是用于定义如何渲染表格的每一行数据。
这里的 #default 是一个具名插槽(named slot),通常用于定义如何渲染表格的默认行。{row} 是一个参数,代表当前行的数据对象。
简单来说,当你有一个表格组件,并希望自定义如何渲染每一行数据时,你可以使用这种语法来达到这个目的。
例如:
<el-table :data="categorys" style="width: 100%">
<el-table-column label="序号" width="100" type="index"> </el-table-column>
<el-table-column label="分类名称" prop="categoryName"></el-table-column>
<el-table-column label="分类别名" prop="categoryAlias"></el-table-column>
<el-table-column label="操作" width="100">
<template #default="{ row }">
<el-button :icon="Edit" circle plain type="primary" @click="showDialog(row)"></el-button>
<el-button :icon="Delete" circle plain type="danger"></el-button>
</template>
</el-table-column>
<template #empty>
<el-empty description="没有数据" />
</template>
</el-table>
在上面的例子中,我们定义了一个具名插槽 #default
,并使用 {row}
参数来访问当前行的数据。然后,我们使用 <el-table-column>
组件来定义如何渲染每一列的数据。
我的案例是用来点击编辑按钮时回显此行上的名称分类和分类别名这两个属性,赋值给这个弹出框里面对应的两个属性,做回显的功能