vue+Element UI table表格动态渲染(包括操作按钮列)、按钮动态绑定点击事件

涉及内容：

1. Element UI的文档与使用；
2. vue如何动态循环渲染Element UI中table内容；
3. Element UI中table最后一列为操作按钮，如何动态渲染并绑定点击事件。

一、Element UI的文档与使用
①Element UI文档
②element-ui的安装使用步骤

二、vue如何动态循环渲染Element UI中table内容；Element UI中table最后一列为操作按钮，如何动态渲染并绑定点击事件

1. Table.vue

<template>
  <div>
    <el-table :data="tableData" class="table_bsm">
      <el-table-column
        v-for="(col, index) in cols"
        :key="index"
        :prop="col.prop"
        :label="col.label"
      >
        <template slot-scope="scope">
          <i-cell :prop="col.prop" :row="scope.row"></i-cell>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import iCell from "./iCell";
export default {
  name: "Table",
  components: {
    iCell,
  },
  data() {
    return {
      cols: [
        { prop: "name", label: "姓名" },
        { prop: "sex", label: "性别" },
        { prop: "age", label: "年龄" },
        { prop: "operate", label: "操作" },
      ],
      tableData: [
        {
          name: "阿熙",
          sex: "男",
          age: "18",
          operate: [
            { name: "新增", type: "primary", size: "mini", click: "add" },
            { name: "编辑", type: "danger", size: "mini", click: "edit" },
            { name: "删除", type: "primary", size: "mini", click: "delete" },
          ],
        },
        {
          name: "小美",
          sex: "女",
          age: "16",
          operate: [
            { name: "新增", type: "primary", size: "mini", click: "add" },
            { name: "编辑", type: "danger", size: "mini", click: "edit" },
            { name: "删除", type: "primary", size: "mini", click: "delete" },
          ],
        },
        {
          name: "囡囡",
          sex: "女",
          age: "20",
          operate: [
            { name: "新增", type: "primary", size: "mini", click: "add" },
            { name: "编辑", type: "danger", size: "mini", click: "edit" },
            { name: "删除", type: "primary", size: "mini", click: "delete" },
          ],
        },
      ],
    };
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.table_bsm {
  width: 98%;
  margin: auto;
}
</style>

2. iCell.vue

<template>
  <div>
    <span v-if="prop != 'operate'">{{ row[prop] }}</span>
    <div v-if="prop == 'operate'">
      <el-button
        v-for="(item, i) in row.operate"
        :key="i"
        v-on:[eventName]="handleClick(item.click)"
        :type="item.type"
        :size="item.size"
        >{{ item.name }}</el-button
      >
    </div>
  </div>
</template>

<script>
export default {
  name: "iCell",
  props: {
    prop: String,
    row: Object,
  },
  data() {
    return {
      eventName: "click",
    };
  },
  methods: {
    //动态绑定操作按钮的点击事件
    handleClick(i) {
      let onClick = i;
      this[onClick]();
    },

    //新增
    add() {
      alert("新增~");
    },
    //编辑
    edit() {
      alert("编辑~");
    },
    //删除
    delete() {
      alert("删除~");
    },
  },
};
</script>

<style scoped></style>

3. 效果图