vue element ui实现隐藏列

最新推荐文章于 2024-07-26 08:15:00 发布

Chloe_lll

最新推荐文章于 2024-07-26 08:15:00 发布

阅读量2.3k

点赞数 1

分类专栏： vue+element ui 文章标签： vue

本文链接：https://blog.csdn.net/weixin_41294419/article/details/107773554

版权

vue+element ui 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

vue element ui实现隐藏列

<el-table-column v-for="col in columnDefs" :key="col.prop" :label="col.label" align="center" 
                       :show-overflow-tooltip="col.showOverflowTooltip">
   <template slot-scope="{row}">
     <span>{{ row[col.prop] }}</span>
   </template>
</el-table-column>

<el-table-column align="center" width="160">
        <template slot="header">
          <span>操作</span>
          <el-popover
            ref="popover"
            placement="left-start"
            title="隐藏/显示列"
            width="150"
            trigger="click">
            <el-checkbox-group v-for="col in columns" :key="col.prop" v-model="col.isShow">
              <el-checkbox :label="col.label" :checked="col.isShow"></el-checkbox>
            </el-checkbox-group>
            <el-button type="text" size="mini" slot="reference"><i class="el-icon-more" style="transform:rotate(90deg)"></i></el-button>
          </el-popover>
        </template>
        <template slot-scope="{row}">
          <el-button type="text" @click="handleUpdate(row)">
            {{ $t('table.edit') }}
          </el-button>
          <el-button type="text" @click="handleRemove(row.idId)">
            {{ $t('table.delete') }}
          </el-button>
        </template>
      </el-table-column>

computed: {
    columnDefs() {
      return this.columns.filter(item => item.isShow)
    }
  },

data() {
	return {
		columns: [
        { prop: 'idId',label: this.$t('bizid.idId'), isShow: true, width: 'auto', showOverflowTooltip: true },
        { prop: 'idName',label: this.$t('bizid.idName'), isShow: true, width: 'auto', showOverflowTooltip: true },
        { prop: 'idLength',label: this.$t('bizid.idLength'), isShow: true, width: 'auto'},
        { prop: 'idValue',label: this.$t('bizid.idValue'), isShow: true, width: 'auto' },
        { prop: 'isGlobal',label: this.$t('bizid.isGlobal'), isShow: true, width: 'auto' },
        { prop: 'idPrefix',label: this.$t('bizid.idPrefix'), isShow: true, width: 'auto' },
        { prop: 'idSuffix',label: this.$t('bizid.idSuffix'), isShow: true, width: 'auto' },
        { prop: 'idType',label: this.$t('bizid.idType'), isShow: true, width: 'auto' },
        { prop: 'organId',label: this.$t('bizid.organId'), isShow: true, width: 'auto' }
      ]
	}
}