zhanghua
2024-11-23 145dbf06c42324c2eeff303ccf1b0414f33f6593
src/components/VisibilityToolbar/index.vue
@@ -1,5 +1,5 @@
<template>
  <div class="top-right-btn" :style="style">
  <div class="top-right-btn">
    <el-row>
      <el-tooltip v-if="search" class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top">
        <el-button size="small" circle icon="el-icon-search" @click="toggleSearch"></el-button>
@@ -12,12 +12,18 @@
      </el-tooltip>
    </el-row>
    <el-drawer :visible.sync="table" title="信息显隐筛选" size="30%" append-to-body>
    <el-drawer
      :visible.sync="table"
      title="信息显隐筛选"
      size="30%"
      append-to-body
      :wrapperCLosable="false"
      :with-header="true">
      <div slot="header">
        <span>信息显隐筛选</span>
      </div>
      <div slot="default">
        <el-table :data="pagedColumns" style="width: 100%; height: 80%">
      <div slot="default" style="margin-left: 20px;margin-top: 20px">
        <el-table :data="pagedColumns" style="width: 95%; height: 80%;;margin-bottom: 40px;">
          <el-table-column prop="index" label="序号" width="80"></el-table-column>
          <el-table-column prop="label" label="数据名称"></el-table-column>
          <el-table-column prop="visible" label="是否显示">
@@ -25,7 +31,8 @@
              <el-switch
                v-model="scope.row.visible"
                class="ml-2"
                style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                active-color="#13ce66"
                inactive-color="#ff4949"
                @change="switchChange(scope.row)"
              ></el-switch>
            </template>
@@ -36,7 +43,6 @@
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          v-if="total > pageSize"
          :page-size="pageSize"
@@ -46,7 +52,7 @@
          @current-change="handlePageChange"
        ></el-pagination>
      </div>
      <div slot="footer">
      <div style="position: absolute; bottom: 0; left: 0; right: 0; padding: 20px; text-align: right;">
        <el-button @click="table = false">取 消</el-button>
        <el-button type="primary" @click="resetSort">重 置</el-button>
      </div>
@@ -126,10 +132,7 @@
  mounted() {
    this.columns.forEach((item, index) => {
      if (item.visible) {
        // 注意:这里假设columnRef应该是一个checkbox组件的引用,
        // 但在Vue 2中,我们可能需要另一种方式来管理checked状态,
        // 因为Vue 2没有ref的自动实例绑定,且这里的columnRef逻辑似乎不完整或错误。
        // 可能需要移除或重写这部分逻辑。
      }
    });
  },
@@ -157,4 +160,14 @@
.show-btn {
  margin-left: 12px;
}
.drawer-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: #fff;
  border-top: 1px solid #e8e8e8;
  text-align: right;
}
</style>