求解：antdv2.0怎么判断才能把table中最后一格的数据5/10左右拆开分别展示？

Question

下面这种有办法拆分开显示吗？在花括号里面使用方法就会报错，有没有什么方法拆开并显示出来？
现在的样子

目标是最后一个左右拆分各定义颜色

<a-table :columns="columns1" :data-source="tableData1" size="small" :pagination="false">
    <template #value="{ text }">
      <span>{{text}}</span>
      <!-- <span>{{ text.includes('/') ?  value1 + '/' + value2  : text}}</span> -->
      <!-- <span>{{ text.match(/(\S*)/)[1] }}</span> -->
      <!-- <span style="color: red">{{ text.match(/\/(\S*)/)[1] }}</span> -->
    </template>
  </a-table>



  const state = reactive({
      columns1: [
        {
          title: 'name',
          dataIndex: 'name',
        },
        {
          title: 'value',
          dataIndex: 'value',
          slots: {
            customRender: 'value',
          },
        },
      ],
      tableData1: [
        {
          key: '1',
          name: '实测',
          value: 4475.59,
          percentage: '',
        },
        {
          key: '2',
          name: '预测',
          value: 2219.23,
          percentage: '49.58%',
        },
        {
          key: '3',
          name: '文件',
          value: '155/684',
          percentage: '2.36%',
        },
      ],
      value1: '',
      value2: '',
    })
let substrValue = state.tableData1[2]['value'].split('/');
    state.value1 = substrValue[0];
    state.value2 = substrValue[1];