123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142 |
- <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>
|