vxe-VXE-Table 中自定义图标

1.准备自定义图标文件

        使用的是 Font Awesome 或其他图标库，确保已将相应的图标库文件引入到项目中。

        自定义的 SVG 图标，将 SVG 文件保存在项目中，并确保可以通过相对路径或绝对路径访问到该 SVG 文件。

2. Vue 组件中引入自定义图标

        使用 Font Awesome 或其他图标库，可以直接在按钮的 icon 属性中设置相应的 CSS 类名。

使用自定义的 SVG 图标，可以通过以下方式引入：

• 将 SVG 文件转换为 Base64 编码格式，并将其作为 Data URI 直接嵌入到 Vue 组件中。
• 使用 v-icon 组件来显示 SVG 图标，或者通过 CSS 的 background-image 属性来设置按钮的背景图片。

3 示例 

        使用自定义的 SVG 图标来作为按钮的图标。只需将相应的 CSS 类名或 SVG 图标路径设置给按钮的 icon 属性即可实现自定义按钮图标。

<template>
  <vxe-grid ref="xTable" :columns="columns" :data="tableData">
    <template #toolbar>
      <vxe-toolbar>
        <vxe-button icon="el-icon-edit" @click="handleEdit">Edit</vxe-button>
      </vxe-toolbar>
    </template>
  </vxe-grid>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { field: 'name', title: 'Name' },
        { field: 'age', title: 'Age' },
        // Other columns...
      ],
      tableData: [
        { name: 'Alice', age: 25 },
        { name: 'Bob', age: 30 },
        // Other data...
      ],
    };
  },
  methods: {
    handleEdit() {
      // Handle edit logic here
    },
  },
};
</script>

4 示例 

        通过 CSS 设置了按钮的背景图片为 custom-icon.svg，点击该按钮时，会触发 handleCustomAction 方法来处理自定义操作逻辑。

<template>
  <vxe-grid ref="xTable" :columns="columns" :data="tableData">
    <template #toolbar>
      <vxe-toolbar>
        <vxe-button @click="handleCustomAction">
          <span class="custom-icon"></span>
          Custom Action
        </vxe-button>
      </vxe-toolbar>
    </template>
  </vxe-grid>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { field: 'name', title: 'Name' },
        { field: 'age', title: 'Age' },
        // Other columns...
      ],
      tableData: [
        { name: 'Alice', age: 25 },
        { name: 'Bob', age: 30 },
        // Other data...
      ],
    };
  },
  methods: {
    handleCustomAction() {
      // Handle custom action logic here
    },
  },
};
</script>

<style scoped>
.custom-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url('path/to/custom-icon.svg');
}
</style>

4.1使用icon属性指定内置图标： 

<vxe-button icon="custom-icon">Click me</vxe-button>

4.2使用icon插槽自定义图标: 

<vxe-button>
  <template #icon>
    <i class="custom-icon"></i>
  </template>
  Click me
</vxe-button>

4.3CSS样式自定义图标： 

<style scoped>
.custom-icon {
  /* 添加自定义图标样式，例如使用Font Awesome或其他图标库 */
}
</style>