drp-ui/src/components/super-table/hide.vue

<template>
  <el-button size="mini" @click="drawer = true">
    {{ number ? `隐藏列 ：${number}` : "隐藏列" }}
    <el-drawer
      :show-close="false"
      :visible.sync="drawer"
      size="20%"
      title="隐藏列"
      append-to-body
    >
      <template slot="title">
        <span>隐藏列</span>
        <el-button type="primary" size="mini" @click="useSubmit('superForm')">
          确 认
        </el-button>
        <el-button size="mini" @click="drawer = false"> 取 消 </el-button>
      </template>
      <el-input
        v-model="key"
        size="mini"
        placeholder="请输入列名称"
        style="width: 100%; padding: 0 16px 16px"
      >
      </el-input>
      <el-row :gutter="20" style="margin: 0; display: flex">
        <el-draggable
          v-model="columns"
          :group="{ item: 'key' }"
          @change="onDraggableChange"
        >
          <el-col
            v-for="({ item }, index) in searchColumns"
            :key="index"
            :span="24"
            style="
              display: flex;
              justify-content: space-between;
              padding: 12px 16px;
            "
          >
            <span
              style="
                height: 20px;
                line-height: 20px;
                font-size: 13px;
                flex: 1;
                cursor: move;
                padding: 0 12px 0 0;
                text-overflow: ellipsis;
                overflow: hidden;
                word-break: break-all;
                white-space: nowrap;
              "
            >
              <i
                class="el-icon-mouse"
                style="color: #72767b; margin: 0 6px 0 0"
              ></i>
              <i
                class="el-icon-user"
                style="color: #72767b; margin: 0 6px 0 0"
              ></i>
              {{ item.title }}
            </span>
          </el-col>
        </el-draggable>
        <div @click.stop>
          <div
            v-for="({ item }, index) in searchColumns"
            :key="index"
            style="padding: 12px 16px"
          >
            <el-switch
              v-model="item.hidden"
              size="mini"
              @change="onDraggableChange"
            ></el-switch>
          </div>
        </div>
      </el-row>
    </el-drawer>
  </el-button>
</template>

<script>
import deepCopy from "@gby/deep-copy";
export default {
  name: "",
  components: {
    ElDraggable: () => import("@/components/draggable/index.vue"),
  },
  props: {
    value: {
      type: Array,
      require: true,
    },
  },
  data() {
    return {
      drawer: false,
      key: "",
    };
  },
  computed: {
    columns: {
      get() {
        return this.$props.value;
      },
      set(value) {
        this.$emit("input", value);
      },
    },
    searchColumns: {
      get() {
        return this.columns.filter(
          ({ item }) => item.title.indexOf(this.key) > -1
        );
      },
      set(value) {},
    },
    number: {
      get() {
        return this.columns.filter(({ item }) => !item.hidden).length;
      },
      set(value) {},
    },
  },
  watch: {},
  methods: {
    onClone(prop) {
      return deepCopy(prop);
    },
    onDraggableChange() {
      this.$emit("change", this.columns);
    },
  },
  created() {},
  mounted() {},
  destroyed() {},
};
</script>
<style scoped></style>