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

<template>
  <div id="app">
    <div>
      <el-checkbox v-model="checked">隱藏系統(tǒng)</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: "一點(diǎn)通",
          appType: "Android",
          dayAve: "0.00062",
          quartAve: "0.00000",
        },
        {
          appId: "fcd8e7a04c",
          appName: "一點(diǎn)通",
          appType: "iOS",
          dayAve: "0.00028",
          quartAve: "0.00000",
        },
        {
          appId: "c1b5ef62eb",
          appName: "二點(diǎn)通",
          appType: "Android",
          dayAve: "0.00007",
          quartAve: "0.2",
        },
      ],
    };
  },
  computed: {
    tableColumnOption() {
      return [
        {
          label: "App",
          prop: "appName",
        },
        {
          visible: !this.checked,
          label: "系統(tǒng)",
          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>

[
  {
    label: "基本信息",
    children: [
      {
        label: "姓名",
        prop: "name",
      },
      {
        label: "年齡",
        prop: "age",
        formatter: (value) => {
          return value + " 歲";
        },
      },
    ],
  },
  {
    label: "聯(lián)系方式",
    children: [
      {
        label: "手機(jī)",
        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("點(diǎn)擊了操作按鈕：" + row.name);
          },
        },
      }, "操作");
    },
  },
]