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


总结:

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

相关推荐
qq_390161777 分钟前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test36 分钟前
js下载excel示例demo
前端·javascript·excel
Yaml41 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事1 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶1 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo1 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v1 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
知孤云出岫1 小时前
web 渗透学习指南——初学者防入狱篇
前端·网络安全·渗透·web
贩卖纯净水.1 小时前
Chrome调试工具(查看CSS属性)
前端·chrome
栈老师不回家2 小时前
Vue 计算属性和监听器
前端·javascript·vue.js