基于element实现动态表头_element动态表头-CSDN博客

本文链接：https://blog.csdn.net/Ydesk116/article/details/127535457

博客涉及Vue.js、JavaScript和ElementUI相关信息技术内容，但具体内容仅显示'over'，未提供更多关键信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div>
    <el-table style="width: 100%" height="100%" :data="dataList">
      <template v-for="item in tabledData">
        <template>
          <el-table-column
            width="100"
            :key="item.tableNmae"
            :label="item.tableNmae"
            align="center"
          >
            <template slot-scope="scope">
              <span>{{ scope.row[item.tableField] }}</span>
            </template>
          </el-table-column>
        </template>
      </template>
      <el-table-column label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      //行，表头
      tabledData: [
        {
          tableNmae: "姓名",
          tableField: "name",
        },
        {
          tableNmae: "组别",
          tableField: "Gender",
        },

        {
          tableNmae: "项目名称",
          tableField: "project",
        },
      ],
      //列
      dataList: [
        {
          name: "小红",
          Gender: "1组",
          project: "1.0",
        },
        {
          name: "小白",
          Gender: "2组",
        },
      ],
    };
  },
  created() {},
  mounted() {},
  methods: {
    handleClick(e) {
      console.log(e);
    },
  },
};
</script>

<style scoped></style>

over