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

news2024/12/23 13:12:56

背景描述：

开发流程：

详细开发流程：

总结：

背景描述：

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

开发流程：

基本上和封装列表页的流程相似，这里不做多余描述，只是需要从父组件里传递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.选择展示列

<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.已选择的展示列怎么控制表格的列显隐

// 已选的展示列
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. 表格的列显示

 <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