关于Ant Design Vue 表格中列的自定义隐藏与展示

在做一个概预算项目的时候，遇到了一个这样的需求：可以把表格中不需要经常展示的字段内容先隐藏掉，等到想看的时候可以随时打开来看，刚开始没有接触过觉得很难的样子，后来通过上网查看，找到一些类似的可用的效果案例，经过一系列的尝试和改变，终于修改成了可以让客户满意的效果。代码如下（示例）：2.重点提炼，大家可以根据需要按需引用代码如下（示例）：总结以上就是今天要讲的内容，本文仅仅简单介绍了Ant Desi

文章共5,745字 · 阅读需要大约20分钟

一键AI生成摘要，助你高效阅读

问答

Geng0520

2709人浏览 · 2023-12-27 14:22:34

Geng0520 · 2023-12-27 14:22:34 发布

前言

在做一个概预算项目的时候，遇到了一个这样的需求：可以把表格中不需要经常展示的字段内容先隐藏掉，等到想看的时候可以随时打开来看，刚开始没有接触过觉得很难的样子，后来通过上网查看，找到一些类似的可用的效果案例，经过一系列的尝试和改变，终于修改成了可以让客户满意的效果。

一、展示效果如下：

在这里插入图片描述

二、使用步骤

1.引入库

代码如下（示例）：

 <a-table ref="table" size="middle" :scroll="{  }" bordered rowKey="id" :columns="filterColumn" :dataSource="dataSource"  :pagination="false" :loading="loading" @change="handleTableChange" >
            <template slot="title">
              <!-- 自定义筛选菜单的插槽 -->
              <!-- 多选框 options：指定可选项 defaultValue：默认选中的选项 change：变化时回调 -->
              <div class="table-head">
                <span v-show="isShowCheckboxCard" class="checkbox-card">
                  <a-checkbox-group
                    :options="checkColumn"
                    :defaultValue="checkColumntwo"
                    @change="checkChange"
                  />
                </span>
                <a-tooltip>
                  <template slot="title">筛选列</template>
                  <a-icon
                    type="control"
                    @click="isShowCheckboxCard = !isShowCheckboxCard"
                    class="control-icon"
                  />
                </a-tooltip>
              </div>
            </template>
        </a-table>
        <script>
			import '@/assets/less/TableExpand.less'
			import { mixinDevice } from '@/utils/mixin'
			import { JeecgListMixinhuizong } from '@/mixins/JeecgListMixinhuizong'
			import { httpAction, getAction, postAction, putAction } from '@/api/manage'
			//先引入文件 注意路径
			export default {
	  name: 'GysFiveTableList',
	  inject: ['reload'],
	  mixins: [JeecgListMixinhuizong, mixinDevice],
	  data() {
	    return {
	    	isShowCheckboxCard: false, // 是否展示 动态展示列 多选框
	      // 初始备份的表格列配置描述及过滤后的容器
	      filterColumn: [],
	      fristList: [
	        {
	          title: '总金额',
	          align: 'center',
	          ellipsis: true,
	          width:120,
	          dataIndex: 'totalPrice',
	          scopedSlots: { customRender: 'totalPrice' }
	        },
	        {
	          title: '总费率',
	          align: 'center',
	          ellipsis: true,
	          width:120,
	          dataIndex: 'totalRate',
	          scopedSlots: { customRender: 'totalRate' }
	        },
	        {
	          title: '增值税率',
	          align: 'center',
	          width:120,
	          ellipsis: true,
	          dataIndex: 'rate',
	          scopedSlots: { customRender: 'rate' }
	        }
	      ], //初始的复选列表,默认不显示的表头数据
	      description: '表五（工程建设其他费）管理页面',
	      // 表头
	      columns: [
	        {
	          title: '序号',
	          dataIndex: '',
	          key: 'rowIndex',
	          width: 60,
	          fixed: 'left',
	          align: 'center',
	          customRender: function(t, r, index) {
	            return parseInt(index) + 1
	          }
	        },
	       
	        {
	          title: '费用名称',
	          align: 'left',
	          // width:width1,
	          ellipsis: true,
	          dataIndex: 'nameFee'
	          /* 配置支持 slot-scope 的属性
	             customRender: 生成复杂数据的渲染函数,function(当前行的值，当前行数据，索引）
	             filterDropdown: 自定义筛选菜单
	             */
	          // scopedSlots: { customRender: 'nameFee ', filterDropdown: 'filterDropdown'}
	        },
	        {
	          title: '总金额',
	          align: 'center',
	          width:120,
	          ellipsis: true,
	          dataIndex: 'totalPrice',
	          scopedSlots: { customRender: 'totalPrice' }
	        },
	        {
	          title: '总费率',
	          align: 'center',
	          width:120,
	          ellipsis: true,
	          dataIndex: 'totalRate',
	          scopedSlots: { customRender: 'totalRate' }
	        },
	        {
	          title: '增值税率',
	          align: 'center',
	          width:120,
	          ellipsis: true,
	          dataIndex: 'rate',
	          scopedSlots: { customRender: 'rate' }
	        },
	        {
	          title: '依据和计算方法',
	          align: 'left',
	          ellipsis: true,
	          dataIndex: 'computingMethod',
	          scopedSlots: { customRender: 'computingMethod' }
	        },
	        {
	          title: '除税价',
	          ellipsis: true,
	          width:120,
	          align: 'center',
	          dataIndex: 'exTaxPrice',
	          scopedSlots: { customRender: 'exTaxPrice' }
	        },
	        {
	          title: '增值税',
	          ellipsis: true,
	          width:120,
	          align: 'center',
	          dataIndex: 'valueAddedTax'
	          
	        },
	        {
	          title: '含税价',
	          ellipsis: true,
	          width:120,
	          align: 'center',
	          dataIndex: 'priceIncludingTax'
	        },
	        {
	          title: '备注',
	          align: 'center',
	          width:90,
	          ellipsis: true,
	          dataIndex: 'remark',
	          scopedSlots: { customRender: 'remark' }
	        },
	        {
	          title: '权重',
	          align: 'center',
	          width: 80,
	          // fixed: 'right',
	          dataIndex: 'weight',
	          scopedSlots: { customRender: 'weight' }
	        }
	     
	      ],
	     
	      
	    }
	  },
  created() {},

  computed: {
    // 用计算属性取出columns的title，作为多选框的选项数据
    checkColumn: function() {
      return this.fristList.map(item => item.title)
    },
    checkColumntwo: function() {
      return this.filterColumn.map(item => item.title)
    }
  },
  mounted() {
    this.init()
  },
  
  methods: {
    //处理异步的方法
    async init() {
      await this.loadData()
      await this.bigtwofang()
    },
   
    bigtwofang(){
      this.gettotalcode() //代替created的一个方法
      //自定义列的显示隐藏，并重新给默认值start
      // 实例创建完成将columns备份给filterColumns
      this.filterColumn = this.columns
      // const titleList = ['总金额', '总费率', '增值税率'] //定义不放的表头
      //循环不放的表头重新赋值filterColumns
      for (var v = 0; v < this.fristList.length; v++) {
        const NewtargetObj = this.columns.find(obj => obj.title === this.fristList[v].title)
        this.filterColumn = this.filterColumn.filter(function(item) {
          return item !== NewtargetObj
        })
      }
      //  console.log(this.filterColumn,"默认显示的表头")
      //自定义列的显示隐藏，并重新给默认值end
    },
    
    //使用循环遍历,将arr2插入到arr1的固定为0的位置
    insertArrayAt(arr1, index, arr2) {
      arr1.splice(index, 0, ...arr2)
      return arr1
    },
    // 多选框的事件回调    //显示隐藏列数据
    checkChange(checked) {
      // 初始是默认全选的，假设此刻点击了name的选择框
      // console.log(checked, '显示隐藏列数据') // ['age','address','action']
      const columns = this.fristList
      // 核心部分，数组过滤循环遍历columns，如果选择的值中包含dataIndex则为true并暴露出去，反之亦然
      const filterValue = columns.filter(item => {
        if (checked.includes(item.title)) {
          // 当暴露值为true时，循环遍历的值会赋给filterValue
          return true
        }
        return false
      })
      // 依旧是假设点击的是name的选择框，暴露的值为[false,true,true,true],所以filterValue中的值没有包含name的那一列
      //定义查询条件
      let Ids = this.fristList.map(item => item.title)
      //定义新的空数组
      let arr = new Array()
      //将默认不显示的那部分数据从默认表头里去除
      this.columns.forEach((item, index) => {
        if (!Ids.includes(item.title)) {
          arr.push(item)
        } else {
        }
      })
      this.columns = arr
      // 将点击的数据插入到默认表头里,然后将值赋给filterColumns
      this.filterColumn = this.insertArrayAt(this.columns, 3, filterValue)
    },

    // 单元格双击
    bccelldblclick(record) {
      console.log(record, '传值')
      this.$refs.dblclickmodalForm.edit(record)
      this.$refs.dblclickmodalForm.title = '公式编辑器：' + `${record.nameFee}`
      this.$refs.dblclickmodalForm.disableSubmit = false
    }
  }
}
</script>
<style lang="less" scoped>
.service-type-management {
  .example {
    text-align: center;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    margin-bottom: 20px;
    padding: 30px 50px;
    margin: 20px 0;
  }

  .table-head {
    display: flex;
    justify-content: end;
    align-items: center;
    height: 30px;
    padding-right: 20px;

    .checkbox-card {
      margin-right: 20px;
    }

    .control-icon {
      border: 1px solid #ccc;
      padding: 8px;

      &:hover {
        color: #0bbaba;
        border: 1px solid #0bbaba;
      }
    }
  }

  .mouse-hover {
    color: #333;

    &:hover {
      color: #0bbaba;
    }
  }

  /deep/ .ant-table-tbody {
    background-color: #fff;
  }
}
</style>

2.重点提炼，大家可以根据需要按需引用

代码如下（示例）：

// 多选框的事件回调    //显示隐藏列数据
    checkChange(checked) {
      // 初始是默认全选的，假设此刻点击了name的选择框
      // console.log(checked, '显示隐藏列数据') // ['age','address','action']
      const columns = this.fristList
      // 核心部分，数组过滤循环遍历columns，如果选择的值中包含dataIndex则为true并暴露出去，反之亦然
      const filterValue = columns.filter(item => {
        if (checked.includes(item.title)) {
          // 当暴露值为true时，循环遍历的值会赋给filterValue
          return true
        }
        return false
      })
      // 依旧是假设点击的是name的选择框，暴露的值为[false,true,true,true],所以filterValue中的值没有包含name的那一列
      //定义查询条件
      let Ids = this.fristList.map(item => item.title)
      //定义新的空数组
      let arr = new Array()
      //将默认不显示的那部分数据从默认表头里去除
      this.columns.forEach((item, index) => {
        if (!Ids.includes(item.title)) {
          arr.push(item)
        } else {
        }
      })
      this.columns = arr
      // 将点击的数据插入到默认表头里,然后将值赋给filterColumns
      this.filterColumn = this.insertArrayAt(this.columns, 3, filterValue)
    },