使用ViewUI Table组件，很多时候要渲染操作按钮，如下图所示：

view-ui-table-btn.jpg

写了一个表格内组件，可以方便渲染表格内按钮和操作处理

<template>
  <div>
    <Button
      v-for="(item) in rebuildData"
      :key="item.operate"
      :type="item.type"
      :size="item.size"
      :ghost="item.ghost"
      :disabled="item.disabled"
      @click="handleClick(item.operate)"
    >{{item.text}}</Button>
  </div>
</template>
<script>
export default {
  name: "TableOperateButton",
  props: {
    data: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      rebuildData: []
    };
  },
  created() {
    this.rebuildData = this.makeData();
  },
  watch: {
    data: {
      handler() {
        this.rebuildData = this.makeData();
      },
      deep: true
    }
  },
  methods: {
    makeData() {
      return this.data
        .filter(
          el =>
            el.visible == undefined ||
            (el.visible != undefined && el.visible == true)
        )
        .map(el => {
          let obj = Object.assign({}, el);

          if (el.type == undefined) {
            obj["type"] = "success";
          }
          if (el.size == undefined) {
            obj["size"] = "small";
          }
          if (el.ghost == undefined) {
            obj["ghost"] = true;
          }
          if (el.disabled == undefined) {
            obj["disabled"] = false;
          }

          return obj;
        });
    },
    handleClick(operate) {
      this.$emit("click", operate);
    }
  }
};
</script>

使用代码片段

     columns: [
        indexColumn,
        {
          title: "ID",
          key: "id",
          width: 90,
          align: "center"
        },
        {
          title: "编码",
          key: "code",
          width: 120,
          align: "center"
        },
        {
          title: "名称",
          key: "name",
          align: "center",
          width: 120
        },
        {
          title: "描述",
          key: "description",
          ellipsis: true,
          align: "center",
          minWidth: 120
        },
        {
          title: "状态",
          key: "status",
          width: 60,
          align: "center",
          render: renderStatus
        },
        {
          title: "操作",
          key: "action",
          align: "center",
          width: 240,
          render: (h, params) => {
            let index = params.index;

            return h(TableOperateButton, {
              props: {
                data: [
                  {
                    operate: "update",
                    text: "编辑"
                  },
                  {
                    operate: "service-status",
                    text: "状态"
                  },
                  {
                    operate: "service-config",
                    text: "配置"
                  },
                  {
                    operate: "service-config-log",
                    text: "配置记录"
                  },
                  {
                    operate: "service-catalog",
                    text: "信息"
                  }
                ]
              },
              on: {
                click: operate => this.handleOperate(operate, index)
              }
            });
          }
        }
      ],