vue 实现全部动态列表展示（包括动态实现操作点击事件）

将表格封装成为一个组件：

<element-table
          ref="elementTable"
          :url="url"
          :params="searchParams"
          :columns="columns"
          v-model:currentPage="currentPage"
          @columnClick="columnClick"
        />

引入：

import ElementTable from "./components/common/ElementTable";

挂载：

 components: {
    ElementTable
  },

定义所需要传递的参数：

data(){
 return {
  columns: [
        {
          key: "processName",
          title: "流程名称"
        },
        {
          key: "aliasName",
          title: "流程别名"
        },
        {
          key: "department",
          title: "部门"
        },
        {
          key: "remark",
          title: "备注"
        },
        {
          key: "status",
          title: "状态",
          formatter: (row, key) => {
            if (row[key] === "1") {
              return "已发布";
            }
            return "未发布";
          }
        },
        {
          key: "ora",
          title: "操作",
          operator: [
            {
              name: "编辑",
              type: "text",
              class: "table-edit-btn table-edit-info",
              click: row => {
                const _row = JSON.parse(JSON.stringify(row));
                const _this = this;
                processResourceXml({ processDefId: row.id }).then(res => {
                  if (res.success) {
                    _this.dialogImgVisible = true;
                    _row.xml = res.data && res.data.replace(/\\/g, "");
                    _this.detail = _row;

                    _this.getConditionMark({ type: _row.alias });
                  } else {
                    this.$message.error(res.message || "打开失败");
                  }
                });
              },
              hidden: row => {
                return row.status === 0;
              }
            },
            {
              name: "复制",
              type: "text",
              class: "table-edit-btn table-edit-info",
              click: row => {
                const _this = this;
                copyProcessDef(row.id).then(res => {
                  if (res.success) {
                    _this.$msg.success(res.message || "复制成功");
                    _this.reloadTable(_this.currentPage);
                  } else {
                    this.$message.error(res.message || "复制失败");
                  }
                });
              }
            },
            {
              name: "删除",
              type: "text",
              class: "table-edit-btn table-edit-change",
              click: row => {
                const _this = this;
                this.$confirm(`是否删除流程 "${row.processName}" ?`, "提示", {
                  confirmButtonText: "确定",
                  cancelButtonText: "取消",
                  type: "warning"
                })
                  .then(() => {
                    processDelete(row.id).then(res => {
                      if (res.success) {
                        _this.$msg.success(res.message || "删除成功");
                        _this.reloadTable(_this.currentPage);
                      } else {
                        _this.$message.error(res.message || "删除失败");
                      }
                    });
                  })
                  .catch(() => {});
              }
            }
          ]
        }
      ]
 }
}

组件写法：

 <el-table
      :data="data.records"
      border
      class="element_table"
      header-cell-class-name="header_cell"
    >
      <el-table-column
        v-for="(item, index) in columns"
        align="center"
        :key="index"
        :prop="item.key"
        :label="item.title"
        :formatter="item.formatter"
        :resizable="false"
      >
        <template #default="scope">
          <div v-if="item.operator">
            <div class="btn-box">
              <template v-for="(o, key) in item.operator" :key="o.title">
                <el-button
                  v-if="!o.hidden || !o.hidden(scope.row)"
                  :class="o.class"
                  :key="key"
                  :type="o.type"
                  @click="o.click(scope.row)"
                  >{{ o.name }}
                </el-button>
              </template>
            </div>
          </div>
          <div v-else>
            <span v-if="!item.formatter">
              <template v-if="item.type">
                {{
                  item.type == "date"
                    ? dateFormat(scope.row[item.key], "YYYY-MM-DD")
                    : dateFormat(scope.row[item.key])
                }}
              </template>
              <template v-else>
                <span
                  v-if="item.key === 'processModdle'"
                  class="process_moddle"
                  @click="openImage(scope.row.id)"
                >
                  {{ scope.row[item.extendKey] + ".png" }}
                </span>
                <span v-else-if="item.key === 'department'">
                  {{ getDeptName(scope.row[item.key]) }}
                </span>
                <span v-else>{{ scope.row[item.key] }}</span>
              </template>
            </span>
            <span
              v-else
              v-html="
                item.formatter(scope.row, item.key, scope.row[item.key], index)
              "
            />
          </div>
        </template>
      </el-table-column>
    </el-table>