element-ui和element-plus的自定义列表格用法

大可-2023-09-21 1:31

element 中的自定义列表格用法

自定义列时只需要声明 slot-scope="scope" 即可。自定义内容需要使用数据时只需要使用 scope.row 即可获取该行数据。

<template slot-scope="scope">
  <div class="overPointr2">
    {{scope.row.address}}
  </div>
</template>

element-plus 中的自定义列表格用法

跟 element 差不多，只不过不再是声明 slot-scope="scope"，而是按需声明 #default 或者 #default="scope"。

1、自定义内容需要使用该行数据时，声明 #default="scope"，再通过 scpoe.row 获取数据。

<el-table-column
   fixed="right"
    label="操作"
    width="100">
  <template #default="scope">
    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
    <el-button type="text" size="small">编辑</el-button>
  </template>
</el-table-column>

2、自定义内容需要使用该行数据时，声明 v-slot:default="scope"，再通过 scpoe.row 获取数据。

  <el-table-column  label="操作" align="center">
     <template v-if="true" v-slot:default="scope">
       <el-button type="primary" size="small" @click="bj"><el-icon><Edit /></el-icon> <span style="margin-left: 3px">编辑</span></el-button>
       <el-button type="danger" size="small" @click="sc(scope.row)"><el-icon><Delete /></el-icon> <span style="margin-left: 3px">删除</span></el-button>
     </template>
    </el-table-column>