如何在syncfusion vue js数据网格中使用计算字段

<template>
  <div>
    <ejs-grid :dataSource="data" :allowPaging="true">
      <e-columns>
        <!-- 在这里定义你的数据列 -->
        <e-column field="name" headerText="Name"></e-column>
        <e-column field="age" headerText="Age"></e-column>
        <e-column field="salary" headerText="Salary"></e-column>
        <e-column headerText="Total Salary" :template="totalSalaryTemplate"></e-column>
      </e-columns>
    </ejs-grid>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        { name: "John", age: 25, salary: 5000 },
        { name: "Jane", age: 30, salary: 6000 },
        { name: "Bob", age: 35, salary: 7000 }
      ]
    };
  },
  methods: {
    totalSalaryTemplate: function (rowData) {
      // 在这里定义计算字段的逻辑
      return rowData.salary * 12;
    }
  }
};
</script>