深入解析el-col-group强大且灵活的Element表格列组件

el-col-group

"el-col-group" 是一个 Vue.js 函数式组件，允许您在 "el-table" 组件中创建一组列，并具有可自定义的渲染和格式化选项。

github地址

安装

# 使用 npm 安装
npm install el-col-group
# 使用 yarn 安装
yarn add el-col-group

使用

安装后，您可以通过导入并将 "el-col-group" 组件注册为组件，在您的 Vue.js 应用程序中使用它。以下是一个示例：

<template>
 <div id="app">
   <div>
     <el-checkbox v-model="checked">隐藏系统</el-checkbox>
   </div>
   <el-table :data="tableData">
     <el-col-group :columns="tableColumnOption"></el-col-group>
   </el-table>
 </div>
</template>
<script>
export default {
 name: "App",
 data() {
   return {
     checked: false,
     tableData: [
       {
         appId: "2e5ab8ce1b",
         appName: "一点通",
         appType: "Android",
         dayAve: "0.00062",
         quartAve: "0.00000",
       },
       {
         appId: "fcd8e7a04c",
         appName: "一点通",
         appType: "iOS",
         dayAve: "0.00028",
         quartAve: "0.00000",
       },
       {
         appId: "c1b5ef62eb",
         appName: "二点通",
         appType: "Android",
         dayAve: "0.00007",
         quartAve: "0.2",
       },
     ],
   };
 },
 computed: {
   tableColumnOption() {
     return [
       {
         label: "App",
         prop: "appName",
       },
       {
         visible: !this.checked,
         label: "系统",
         prop: "appType",
         renderHeader: (h, { column }) => {
           return h("div", { style: { color: "red" } }, [column.label]);
         },
       },
       {
         label: `季度平均崩溃率`,
         prop: "quartAve",
         render: (h, row) => {
           return h(
             "span",
             {
               domProps: {
                 style: `color: ${row.quartAve > 0.1 ? "red" : "green"}`,
               },
             },
             [row.quartAve]
           );
         },
       },
     ];
   },
 },
};
</script>

在上面的示例中，"el-col-group" 组件在 "el-table" 组件中使用，并且 "columns" prop 绑定到存储在 "columnConfigs" 数据属性中的列配置数组。

Props

"el-col-group" 组件接受以下 props：

• columns (Array, required): 列配置的数组。每个列配置应该是一个包含属性如 "label"、"prop"、"formatter"、"render"、"children" 和 "visible" 的对象。详细信息请参见 "列配置" 部分。

列配置

"columns" prop 中的每个列配置对象可以包含以下属性：

• label (String, required): 列的标签，用于显示在表头中。

• prop (String, required): 列的字段名，用于从数据源中获取对应的值。

• formatter (Function): 格式化函数，用于对列的值进行格式化处理。

• render (Function): 渲染函数，用于自定义列的渲染方式。

• children (Array): 子列配置的数组，用于创建嵌套表头。

• visible (Boolean): 列的可见性，用于控制列是否显示。

在 "el-col-group" 组件的列配置中，您可以使用渲染函数和格式化函数来自定义列的渲染方式和格式化处理。渲染函数接收两个参数，分别是 Vue.js 的渲染函数 (h) 和当前行的数据对象 (row)，可以通过调用渲染函数 (h) 来创建自定义的列渲染内容。格式化函数接收当前列的值 (value) 和当前行的数据对象 (row)，并返回格式化后的值。

示例

以下是一个示例的列配置数组，其中包含了多级嵌套表头、自定义渲染和格式化处理：

[
 {
   label: "基本信息",
   children: [
     {
       label: "姓名",
       prop: "name",
     },
     {
       label: "年龄",
       prop: "age",
       formatter: (value) => {
         return value + " 岁";
       },
     },
   ],
 },
 {
   label: "联系方式",
   children: [
     {
       label: "手机",
       prop: "phone",
     },
     {
       label: "邮箱",
       prop: "email",
       render: (h, row) => {
         return h("a", {
           attrs: {
             href: "mailto:" + row.email,
           },
         }, row.email);
       },
     },
   ],
 },
 {
   label: "操作",
   render: (h, row) => {
     return h("button", {
       on: {
         click: () => {
           alert("点击了操作按钮：" + row.name);
         },
       },
     }, "操作");
   },
 },
]

在上面的示例中，"基本信息" 和 "联系方式" 是嵌套表头的两个父级列，分别包含了 "姓名"、"年龄"、"手机" 和 "邮箱" 四个子列。"年龄" 列使用了格式化函数对值进行了格式化处理，"邮箱" 列使用了渲染函数创建了一个链接，点击后会弹出一个提示框，显示了当前行的姓名。"操作" 列使用了渲染函数创建了一个按钮，点击按钮时会触发一个弹出提示框。

来源：https://juejin.cn/post/7225511164125446181