ytTableBtn 自定义文字按钮组件

使用场景

具有权限的按钮组，需要根据权限字符来判断按钮的显示隐藏

实例属性

属性名	默认值	类型	描述	是否必填
permiArr	[]	Array	权限数组，存放当前系统登陆人所具备的所有权限（通常存放在vuex中） demo: ["system:user:add", "system:user:update", "system:user:delete"]	true
btnList	[]	Array	按钮数组 demo：[{name: "新增",icon: "el-icon-plus",color: "#1492FF",hasPermi: "system:user:resetPwd",}]	true

事件

事件名	参数	描述
sendClick	name	将点击按钮类型传递给父组件

简单使用

<!--
 * @Description: ytTableBtn 自定义按钮组的使用 页面
 * @Author: mhf
 * @Date: 2023/11/5 13:09
-->
<template>
  <div>
    <ytTableBtn
      ref="ytTableBtn"
      :btnList="btnList"
      :permiArr="permiArr"
      @sendClick="getClick"
    >
    </ytTableBtn>
  </div>
</template>

<script>
export default {
  name: "useYtTableBtn",
  components: {},
  props: {},
  computed: {},
  watch: {},
  filters: {},
  data() {
    return {
      btnList: [
        {
          name: "无权限1",
          icon: "el-icon-delete",
          color: "#fc5c5c",
        },
        {
          name: "无权限2",
          icon: "el-icon-delete",
          color: "green",
        },
        {
          name: "新增",
          icon: "el-icon-plus",
          color: "#1492FF",
          hasPermi: "system:user:add",
        },
        {
          name: "导入",
          icon: "el-icon-download",
          color: "#1492FF",
          hasPermi: "system:user:import",
        },
        {
          name: "导出",
          icon: "el-icon-upload2",
          color: "#1492FF",
          hasPermi: "system:user:export",
        },
        {
          name: "删除",
          icon: "el-icon-delete",
          color: "#fc5c5c",
          hasPermi: "system:user:delete",
        },
      ],
      permiArr: ["system:user:add", "system:user:export", "system:user:delete"],
    };
  },
  methods: {
    /**
     * @Event 接收点击的按钮类型
     * @description:
     * @author: mhf
     * @time: 2023-11-05 13:58:34
     **/
    getClick(name) {
      this.$message.success(`点击了${name}`)
      console.log(name);
    },
  },
  created() {},
  mounted() {},
  destroyed() {},
};
</script>

<style lang="scss" scoped></style>