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

目录

背景描述:

开发流程:

详细开发流程:

总结:


背景描述:

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


开发流程:

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

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

javascript 复制代码
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.选择展示列

html 复制代码
<el-col :span="12">
          <el-popover placement="bottom" trigger="click" :width="300">
            <template #reference>
              <el-button class="right-button" type="default">
                <el-icon><Filter /></el-icon>
              </el-button>
            </template>

            <span style="margin: 0 10px 0 0; font-size: 14px">选择展示列</span>
            <el-select v-model="selectedColumns" multiple collapse-tags :teleported="false" @change="selectColumns">
              <el-option
                v-for="(item, index) in tableCol"
                :key="item.column_id"
                :disabled="index == 0"
                :label="item.column_name"
                :value="item.column_id"
              ></el-option>
            </el-select>
          </el-popover>
        </el-col>

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

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

javascript 复制代码
// 已选的展示列
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
  }
}
  1. 表格的列显示
html 复制代码
 <el-table
        v-loading="loading"
        :data="tableData"
        class="table-small-custom"
        height="calc(100vh - 240px)"
        stripe
        @sort-change="changeTableSort"
      >
        <el-table-column type="index" width="70" label="序号">
          <template #default="scope">
            <span v-text="getIndex(scope.$index)"></span>
          </template>
        </el-table-column>
        <el-table-column
          v-for="(col, index) in showTableCol"
          :key="index"
          :prop="col.column_id"
          :label="col.column_name"
          :min-width="col.minWidth"
          :sortable="col.sortable"
          :is-show-overflow-tooltip="true"
        />
      </el-table>

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

over


总结:

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

相关推荐
我爱李星璇2 分钟前
HTML常用表格与标签
前端·html
疯狂的沙粒6 分钟前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员22 分钟前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐24 分钟前
前端图像处理(一)
前端
程序猿阿伟31 分钟前
《智能指针频繁创建销毁:程序性能的“隐形杀手”》
java·开发语言·前端
疯狂的沙粒33 分钟前
对 TypeScript 中函数如何更好的理解及使用?与 JavaScript 函数有哪些区别?
前端·javascript·typescript
瑞雨溪42 分钟前
AJAX的基本使用
前端·javascript·ajax
力透键背44 分钟前
display: none和visibility: hidden的区别
开发语言·前端·javascript
程楠楠&M1 小时前
node.js第三方Express 框架
前端·javascript·node.js·express
盛夏绽放1 小时前
Node.js 和 Socket.IO 实现实时通信
前端·后端·websocket·node.js