巧夺天工，妙笔生花：Vue+Element UI Table表格之动态渲染表头内容及操作按钮

2024-02-03 18:57:57

挥毫泼墨，描绘动态表头

在前端开发中，表格扮演着重要的角色，而构建动态、交互丰富的表格往往需要付出额外的努力。借助 Vue.js 的强大生态系统和 Element UI 的卓越设计，我们能够轻松实现这一目标。

Vue.js 与 Element UI 的强强联手

Vue.js 是一个渐进式 JavaScript 框架，以其轻量级、响应性和数据驱动的方式而闻名。Element UI 则是一个基于 Vue.js 的前端 UI 框架，提供了一系列开箱即用的组件，简化了界面开发。

打造动态表头

使用 Vue.js 和 Element UI，我们可以轻松创建可动态修改的表头。这在需要根据用户操作或数据变化调整表头时非常有用。

// 导入 Vue 和 Element UI
import Vue from 'vue'
import { Table, TableColumn } from 'element-ui'

// 注册 Vue 和 Element UI 组件
Vue.component('el-table', Table)
Vue.component('el-table-column', TableColumn)

// 定义 Vue 实例
const app = new Vue({
  el: '#app',
  data() {
    return {
      // 表头数据
      columns: [
        {
          prop: 'name',
          label: '姓名'
        },
        {
          prop: 'age',
          label: '年龄'
        },
        {
          prop: 'address',
          label: '地址'
        }
      ],

      // 表格数据
      data: [
        {
          name: '张三',
          age: 20,
          address: '北京市海淀区'
        },
        {
          name: '李四',
          age: 25,
          address: '上海市浦东新区'
        },
        {
          name: '王五',
          age: 30,
          address: '广州市天河区'
        }
      ]
    }
  }
})

如上代码所示，我们定义了一个 Vue 实例，并配置了表头数据和表格数据。通过使用 v-for 指令，我们可以在 Vue 实例中动态渲染表头和数据行。

灵活操作按钮

除了动态表头外，我们还可以使用 Element UI 的按钮组件为表格添加可操作的按钮。

// 在表头列中添加操作按钮
const columns = [
  {
    prop: 'name',
    label: '姓名'
  },
  {
    prop: 'age',
    label: '年龄'
  },
  {
    prop: 'address',
    label: '地址'
  },
  {
    label: '操作',
    render: (h, params) => {
      return h('div', [
        h('el-button', {
          type: 'primary',
          size: 'small',
          onClick: () => {
            // 点击按钮时执行的操作
          }
        }, '编辑'),
        h('el-button', {
          type: 'danger',
          size: 'small',
          onClick: () => {
            // 点击按钮时执行的操作
          }
        }, '删除')
      ])
    }
  }
]

这段代码展示了如何在表头中添加一个操作列，其中包含编辑和删除按钮。这些按钮可以通过 render 函数进行自定义，提供高度的灵活性。

个性化设计

Vue.js 和 Element UI 不仅提供了动态性和灵活性，还允许开发者对表格进行个性化设计，以满足特定的视觉需求。

// 自定义表格样式
const tableStyle = {
  width: '100%',
  border: '1px solid #dddddd',
  borderRadius: '5px'
}

// 自定义表格头部样式
const headerStyle = {
  backgroundColor: '#f5f5f5',
  color: '#606266',
  fontWeight: 'bold'
}

// 自定义表格主体样式
const bodyStyle = {
  backgroundColor: '#ffffff',
  color: '#606266'
}