elementUI-el-table组件使用总结

起名好难（# #）

已于 2023-04-23 23:43:09 修改

阅读量2.1k

点赞数

分类专栏：前端文章标签： elementui vue.js 前端

于 2023-04-21 15:58:21 首次发布

本文链接：https://blog.youkuaiyun.com/qq_49172635/article/details/130290067

版权

前端专栏收录该内容

10 篇文章

订阅专栏

本文介绍了在Vue2项目中如何对el-table组件进行自定义，包括表头的自定义，如添加搜索框，以及表格内容的自定义，如数据格式转换、内容展示形式改变、插入图片和根据单元格值展示不同内容。通过使用slot、formatter属性和条件渲染，可以实现更复杂的表格功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、背景

vue2项目中用到el-table这个组件，但基础的功能不够用，所以需要自定义

二、表头自定义

比如要让表头展现出下面的形式：

只需使用 slot="header" slot-scope="scope" 对插槽进行定义，并绑定变量

<el-table>    
    <el-table-column>
        <template slot="header" slot-scope="scope">
            <el-input
                v-model="search"
                placeholder="输入关键字搜索"/>
        </template>
    </el-table-column>
</el-table>


data() {
      return {
        search: ''
      }
},

三、表格内容自定义

有时除了对表头要做定制外，对表格内容也需要做定制，比如按照表格值是0or1来显示不同的内容等。

3.1对表格数据做二次处理

一个经典例子就是时间戳格式的转换（后端传回来的数据往往不是xxxx-xx-xx这种形式）。

只需给 el-table-column 的 formatter 属性绑定一个自己写的函数即可，比如下面这样：

<el-table-column prop="Start" :formatter="dateFormat"  label="开始时间"></el-table-column>

dateFormat(row, column) {
    const date = row[column.property]
    if (date === null || date === undefined) {
        return '<null>'
    }
    return date
},

3.2改变表格内容的展示形式

只需在列标签内部定义 slot-scope="scope"这个插槽然后写入自定义内容即可

<el-table :data="tableData" border stripe style="width: 100%">
    <el-table-column prop="name" label="类名" width="180">
    </el-table-column>
    <el-table-column prop="icon" label="图标" width="180">
        <template slot-scope="scope">
            <i :class="scope.row.icon"></i>
        </template>
    </el-table-column>
</el-table>


<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: '图标1',
          icon: 'fa fa-camera-retro',
        },
        {
          name: '图标2',
          icon: 'fa fa-camera-retro2',
        },
      ]
    }
  }
}
</script>

上述代码效果如下：

3.3内容中插入图片

和3.2的做法类似，不过这里需要注意要使用 :src 这种写法（绑定变量而非字符串）

<el-table-column prop="img" label="图片">
   <template v-slot="scope">
      <img :src="scope.row.img" width="90" height="90">
   </template>
</el-table-column>


data() {
    return {
        imgs: [
            {img: require('@/assets/images/views/login-logo1.png') },
            {img: require('@/assets/images/views/login-logo2.png') }, 
            {img: require('@/assets/images/views/login-logo3.png') },
        ]
    }
}

3.4根据单元格的值来展示不同的内容

比如需要根据用户状态来显示“已启用”或“已禁用”按钮。

思路：在插槽中使用v-if来进行条件判断

<el-table-column label="是否启用" prop="user_status" width="100">
    <template slot-scope="scope">
        <div>
            <el-button v-if="scope.row.user_status == 1">已启用</el-button>
            <el-button v-else>已禁用</el-button>
        </div>
    </template>
</el-table-column>

效果如下：