element Table 展开行功能 （单击行展开 且只展开一行，隐藏藏icon方式）/ 自定义表头（table表头加按钮）render渲染下 按钮禁用

消息中心：

1.el-tabs使用

<el-tabs v-model="activeName" @tab-click="handleClick">
   <el-tab-pane label="全部类型" name="first">
   ...全部类型
   </el-tab-pane>
<el-tab-pane label="公告" name="second">公告</el-tab-pane>
<el-tab-pane label="产品服务" name="third">产品服务</el-tab-pane>
<el-tab-pane label="安全消息" name="fourth">安全消息</el-tab-pane><el-tab-pane label="账户信息" name="five">账户信息</el-tab-pane>
<el-tab-pane label="工单信息" name="six">工单信息</el-tab-pane>
<el-tab-pane label="其他" name="seven">其他</el-tab-pane>
</el-tabs>  

data(){
	return() {
	activeName: "first",
	}
}
methods:{
    handleClick(e, event) {
      //   if (e._props.name === "first") {
      //     // return this.getlistPageToBeClaimed();
      //   } else if (e._props.name === "second") {
      //     // return this.$refs.WaitingForProcessing.getlistPageInHandle(); //待处理工单
      //   } else if (e._props.name === "third") {
      //     // return this.$refs.FinishProcessed.getlistPageInHandle(); //已办理工单
      //   } else {
      //     // return this.$refs.AllOrder.getlistPageAll(); //查询所有工单列表
      //   }
      this.changeTbas(e._props.name);
    },
    changeTbas(result) {
      const Object = {
        first: "first",//发送请求
        second: "second",
        third: "third",
        fourth: "fourth",
        five: "five",
        six: "six",
        seven: "seven",
      };
      console.log(Object[result]);
      this.$message.success(Object[result]);
    },
} 

2.element Table 展开行功能 （单击行展开 且 只展开一行，隐藏藏icon方式）

官方使用：

通过设置 type=“expand” 和 Scoped slot 可以开启展开行功能，el-table-column 的模板会被渲染成为展开行的内容，展开行可访问的属性与使用自定义列模板时的 Scoped slot 相同。

但这种设置，只是点击箭头可展开 ，点击整行是不能展开的

但想要提升用户体验，最好的是点击行可展开

row-key="id"
:expand-row-keys="expands"
@row-click="clickRowHandle"

示例

   <el-tab-pane label="全部类型" name="first">
              <el-table
                highlight-current-row
                :cell-style="cellStyle"
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%; cursor: pointer"
                @selection-change="handleSelectionChange"
                @expand-change="expandChange"
                :expand-row-keys="expands"
                @row-click="singleSelectHandle"
                row-key="id"
              >
                <el-table-column type="expand" width="1">
                  <!-- 展开行信息 -->
                  <template v-slot="scope">
                    <div
                      v-loading="!scope.row.hasOwnProperty('itemList')"
                      class="infoBox"
                    >
                      <ul v-if="scope.row.hasOwnProperty('itemList')">
                        <li
                          v-for="(item, index) in scope.row.itemList"
                          :key="index"
                        >
                          <span
                            >云产品:
                            <el-tag
                              size="mini"
                              effect="plain"
                              v-if="item.accountBelongType === 'unionpay'"
                              >{{ item.manufacturer }}银联云 :
                              {{ item.productName }}</el-tag
                            >
                            <el-tag
                              size="mini"
                              effect="plain"
                              type="warning"
                              v-else
                              >{{ item.manufacturer }}百度云 :
                              {{ item.productName }}</el-tag
                            >
                          </span>
                          <span>实例：{{ item.instanceId }}</span>
                          <span>消费成本：{{ item.monthBill }}</span>
                          <span>应收账款：{{ item.monthDues }}</span>
                        </li>
                      </ul>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column type="selection" width="48"> </el-table-column>

                <el-table-column
                  type="index"
                  :index="indexMethod"
                  label="全选"
                  align="center"
                  width="48"
                >
                </el-table-column>
                <!-- :render-header="renderHeader" 自定义表头 -->
                <el-table-column
                  prop="message"
                  :render-header="renderHeader"
                  :show-overflow-tooltip="true"
                >
                  <template #default="{ row }">
                    <div>
                      [{{ row.state === "2" ? "已读" : "未读" }}]
                      {{ row.message }}
                    </div>
                  </template>
                </el-table-column>

                <el-table-column prop="createTime" align="center" width="180" />
                <el-table-column prop="status" width="100" />
              </el-table>
    </el-tab-pane>

实现点击行展开 ，（可控制是否只展开一行）

data(){
	return {

    // 要展开的行，数值的元素是row的key值
	expands:[]
	}
}
    //获取点击行 展开
    singleSelectHandle(row, expandedRows) {
      console.log(row);
      if (this.expands.includes(row.id)) {
        this.expands = this.expands.filter((val) => val !== row.id);
      } else {
        // 只展开一行
        if (expandedRows.length) {
          this.expands = [];
          if (row) {
            that.expands.push(row.id); // 每次push进去的是每行的ID
          }
        } else {
          this.expands = []; // 默认不展开
        }

        this.expands.push(row.id);
      }
    },

展开的icon图标隐藏，然后给这一列宽设置为1（样式美化）

::v-deep .el-table__expand-icon {
  display: none !important;
}

3.自定义表头（table表头加按钮）render渲染下 按钮禁用

 methods: {
    // 自定义表头
    renderHeader(h, params) {
      return (
        <div>
          <el-button
            type="primary"
            style=""
            size="small"
            //加入点击事件---------
            onClick={() => this.ReadChange()}
          >
            标记已读
          </el-button>
          <el-button
            type="danger"
            style="margin-left:10px"
            size="small"
            // render 渲染按钮禁用
            disabled={this.multipleSelection.length <= 0 ? true : false}
            //加入点击事件---------
            onClick={() => this.delete()}
          >
            批量删除
          </el-button>
        </div>
      );
    },
    // 已读
    ReadChange() {
      this.$message.success("标记已读");
    },
    //批量删除
    async delete() {
      const ids = this.multipleSelection.map((item) => item.id);
      const names = this.multipleSelection.map((item) => item.status);
      try {
        await this.$confirm(
          `确认对消息 : [${names.join(",")}] 进行删除操作?`,
          "温馨提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        );
        await reqDeleteModule(ids.join(","));
        if (this.tableData.length === 1 && this.page > 1) {
          this.page--;
        }
        this.$message.success("删除成功");
        // this.getMoudleList();
      } catch (err) {
        console.log(err);
      }
    },
 }