zoukankan      html  css  js  c++  java
  • vue+element-ui:table表格中的slot 、formatter属性

    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) },
    }
  • 相关阅读:
    Hibernate学习之缓存机制
    Hibernate学习之hibernate状态
    Ajax学习之小结
    Hibernate学习之hibernate执行顺序
    Svn入门
    Svn服务启动的两种方式
    Eclipse安装Svn插件
    一种给力的带背景的超链接的写法
    转载:IE下div使用margin:0px auto不居中的原因
    github上的Lua in Erlang
  • 原文地址:https://www.cnblogs.com/tdxl/p/14297020.html
Copyright © 2011-2022 走看看