vue3 列表页开发【选择展示列】功能

目录

背景描述：

开发流程：

详细开发流程：

总结：

---

背景描述：

这个功能是基于之前写的   封装列表页  的功能继续写的，加了一个选择展示列的功能，可以随时控制表格里展示那些列的数据，如图，大概样式是这样：

---

开发流程：

基本上和封装列表页的流程相似，这里不做多余描述，只是需要从父组件里传递tableColumn，也可以在本组件定义

tableColumn除了控制表格的column，还有就是【选择列】的功能的数据从这里来，这里可以设置哪些需要显示与隐藏，如下：

const tableColumn = ref([
  {
    column_id: 'op_name',
    column_name: '操作人',
    default_display: true,
    sortable: true,
    minWidth: 100
  },
  {
    column_id: 'op_roles',
    column_name: '角色',
    default_display: true,
    sortable: true,
    minWidth: 150
  },
 //....
  {
    column_id: 'create_at',
    column_name: '名称12',
    default_display: true,
    sortable: true,
    minWidth: 170
  },
  {
    column_id: 'update_at',
    column_name: '名称13',
    default_display: false,
    sortable: true,
    minWidth: 170
  }
])

---

详细开发流程：

提示：这里描述项目中遇到的问题：

1.选择展示列

          
            

            选择展示列
            
              
            
          
        

这里的tableCol是从父组件传的tableColumn， tableCol.value = props.tableColumn

2.已选择的展示列怎么控制表格的列显隐

// 已选的展示列
const selectedColumns = ref([])
//选择展示列
const selectColumns = () => {
  showTableCol.value = []
  let arr = []
  if (selectedColumns.value.length && selectedColumns.value.length != 0) {
    selectedColumns.value.forEach((element) => {
      tableCol.value.forEach((item, index) => {
        if (index == 0) {
          item.default_display = true
        }
        item.default_display = false
        if (element == item.column_id || index == 0) {  //比如至少要选择第一列，不能一列都不显示
          arr.push(index)
        }
      })
    })
    arr = [...new Set(arr)]
    arr.forEach((element) => {
      tableCol.value[element].default_display = true
    })

    let dataTable = tableCol.value.filter((item, index) => {
      return item.default_display
    })
    showTableCol.value = dataTable
  } else {
    let dataTable = []
    dataTable = tableCol.value.filter((item) => {
      return item.default_display
    })
    dataTable.forEach((item) => {
      selectedColumns.value.push(item.column_id)
    })
    showTableCol.value = dataTable
  }
}

3. 表格的列显示

这里表格的渲染是通过v-for  showTableCol ,主要就是这个。

over

---

总结：

目前我经常是通过这个方式写【选择展示列】功能，过滤那部分，没怎么考虑最优解，反正数据也不多，直接这样写了，如果有更合适的方式，欢迎分享~