码迷,mamicode.com
首页 > 其他好文 > 详细

vue+element-ui:table表格中的slot 、formatter属性

时间:2021-01-20 11:40:59      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:展示   use   style   value   ima   btn   class   col   bsp   

slot 插槽,table中表示该行内容以自定义方式展示

:formatter 方法,用来格式化内容

Function(row, column, cellValue, index)

html

<template-table
      ref="multipleTable"
      :tableData="tableData"
      :config="tableConfig"
      :pageConfig="pageConfig"
    >
    <template slot="avatar" slot-scope="scope">
       <img :src="scope.row.avatar" width="40" height="40" />
    </template>
    <template slot="btns" slot-scope="scope">
      <el-button type="text" size="small" @click="batchExamine(scope.row.commentId, 1)">通过</el-button>
      <el-button type="text" size="small" @click="batchExamine(scope.row.commentId, 2)">不通过</el-button>
    </template>
</template-table>

 

js

export default {
  data () {
    return {
      tableData: [{
    commentId: 1,
    avatar: ‘./image.png‘,
    userType: 1
    }], tableConfig: { size:
‘mini‘, headerRowClassName: ‘table-header‘, cells: [ { prop: ‘avatar‘, label: ‘用户头像‘, mWidth: 50, slot: true }, { prop: ‘userType‘, label: ‘用户身份‘, mWidth: 60, formatter: this.formatUserType }, { fixed: ‘right‘, prop: ‘btns‘, label: ‘审核‘, mWidth: 80, slot: true } ] }, // 翻页 pageConfig: { total: 0, pageNo: 1, pageSize: 50 } } }, methods: { formatUserType (row) { let userTypes = new Map([ [1, ‘学生‘], [2, ‘老师‘] ]) return userTypes.get(row.userType) },
}

 

vue+element-ui:table表格中的slot 、formatter属性

标签:展示   use   style   value   ima   btn   class   col   bsp   

原文地址:https://www.cnblogs.com/tdxl/p/14297020.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!