十分钟入门：El-table表格动态修改表头与调整样式

前端

2023-06-30 05:10:07

使用 El-Popover 实现 El-Table 表头动态修改

简介

在使用 El-Table 表格时，我们经常会遇到需要动态修改表头的场景。例如，用户需要根据实际需求自定义表头显示的内容，或调整表头宽度以适应不同的显示场景。此时，使用 El-Popover 组件可以轻松实现这一需求。

El-Popover 组件介绍

El-Popover 组件是一种用于创建悬浮提示的组件。它具有灵活的自定义功能，可以轻松与其他组件结合使用。在修改 El-Table 表头的场景中，我们可以利用 El-Popover 组件实现表头信息的动态修改。

操作步骤

1. 修改 data

在组件的 data 中定义表头信息，包括表头文本、数据字段和宽度：

data() {
  return {
    headers: [
      { label: '姓名', prop: 'name', width: 100 },
      { label: '年龄', prop: 'age', width: 100 }
    ],
    tableData: [
      { name: '张三', age: 20 },
      { name: '李四', age: 30 }
    ]
  }
}

2. 修改 methods

定义三个方法：打开 popover 弹框、关闭 popover 弹框以及确认修改表头：

methods: {
  handleEdit(index, row) {
    this.$refs['popover' + index].open() // 弹出popover弹框
  },
  handleClose(index) {
    this.$refs['popover' + index].close() // 关闭popover弹框
  },
  handleConfirm(index) {
    const newHeader = {
      label: this.newHeaderLabel,
      prop: this.newHeaderProp,
      width: this.newHeaderWidth
    }
    this.headers[index] = newHeader // 替换原来的表头
    this.handleClose(index) // 关闭popover弹框
  }
}

3. 修改 template

在表头模板中，使用 El-Popover 组件包裹表头元素，并设置点击打开 popover 弹框：

<el-table-column>
  <template slot="header">
    <div>姓名</div>
    <el-popover
      ref="popover0"
      trigger="click"
      placement="top"
      width="300"
      @open="handleEdit(0,tableData[0])"
      @close="handleClose(0)"
    >
      <div>
        <el-input v-model="newHeaderLabel" placeholder="请输入新表头名称"></el-input>
        <el-input v-model="newHeaderProp" placeholder="请输入新表头数据字段"></el-input>
        <el-input v-model="newHeaderWidth" placeholder="请输入新表头宽度"></el-input>
        <el-button type="primary" @click="handleConfirm(0)">确认</el-button>
      </div>
    </el-popover>
  </template>
</el-table-column>

代码示例

<template>
  <el-table ref="table" :data="tableData" :headers="headers">
    <el-table-column>
      <template slot="header">
        <div>姓名</div>
        <el-popover
          ref="popover0"
          trigger="click"
          placement="top"
          width="300"
          @open="handleEdit(0,tableData[0])"
          @close="handleClose(0)"
        >
          <div>
            <el-input v-model="newHeaderLabel" placeholder="请输入新表头名称"></el-input>
            <el-input v-model="newHeaderProp" placeholder="请输入新表头数据字段"></el-input>
            <el-input v-model="newHeaderWidth" placeholder="请输入新表头宽度"></el-input>
            <el-button type="primary" @click="handleConfirm(0)">确认</el-button>
          </div>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column>
      <template slot="header">
        <div>年龄</div>
        <el-popover
          ref="popover1"
          trigger="click"
          placement="top"
          width="300"
          @open="handleEdit(1,tableData[1])"
          @close="handleClose(1)"
        >
          <div>
            <el-input v-model="newHeaderLabel" placeholder="请输入新表头名称"></el-input>
            <el-input v-model="newHeaderProp" placeholder="请输入新表头数据字段"></el-input>
            <el-input v-model="newHeaderWidth" placeholder="请输入新表头宽度"></el-input>
            <el-button type="primary" @click="handleConfirm(1)">确认</el-button>
          </div>
        </el-popover>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      headers: [
        { label: '姓名', prop: 'name', width: 100 },
        { label: '年龄', prop: 'age', width: 100 }
      ],
      tableData: [
        { name: '张三', age: 20 },
        { name: '李四', age: 30 }
      ],
      newHeaderLabel: '',
      newHeaderProp: '',
      newHeaderWidth: ''
    }
  },
  methods: {
    handleEdit(index, row) {
      this.$refs['popover' + index].open() // 弹出popover弹框
    },
    handleClose(index) {
      this.$refs['popover' + index].close() // 关闭popover弹框
    },
    handleConfirm(index) {
      const newHeader = {
        label: this.newHeaderLabel,
        prop: this.newHeaderProp,
        width: this.newHeaderWidth
      }
      this.headers[index] = newHeader // 替换原来的表头
      this.handleClose(index) // 关闭popover弹框
    }
  }
}
</script>

常见问题解答

1. 如何设置 popover 弹框的宽度？

<el-popover
  ref="popover0"
  trigger="click"
  placement="top"
  width="300"
  @open="handleEdit(0,tableData[0])"
  @close="handleClose(0)"
>

2. 如何获取修改后的表头信息？

handleConfirm(index) {
  const newHeader = {
    label: this.newHeaderLabel,
    prop: this.newHeaderProp,
    width: this.newHeaderWidth
  }
  this.headers[index] = newHeader // 替换原来的表头
  this.handleClose(index) // 关闭popover弹框
}

3. 如何动态修改多个表头？

可以根据需要添加多个 El-Popover 组件，并为每个组件设置不同的索引值，以便在修改时能准确获取到对应表头的索引。

4. 如何设置 popover 弹框的触发方式？

trigger="click" // 点击触发
trigger="hover" // 悬浮触发

5. 如何自定义 popover 弹框的内容？

<el-popover
  ref="popover0"
  trigger="click"
  placement="top"
  width="300"
  @open="handleEdit(0,tableData[0])"
  @close="handleClose(0)"
>
  <div>
    <el-input v-model="newHeaderLabel" placeholder="请输入新表头名称"></el-input>
    <el-input v-model="newHeaderProp" placeholder="请输入新表头数据字段"></el-input>
    <el-input v-model="newHeaderWidth" placeholder="请输入新表头宽度"></el-input>
    <el-button type="primary" @click="handleConfirm(0)">确认</el-button>
  </div>
</el-popover>