帮我优化一下下面的代码，并实现行内容不足6行时，自动填充空行为横杠<uni-table emptyText="暂无更多数据"> <uni-tr> <uni-th align="center">号码/姓名</uni-th> <uni-th align="center">项目</uni-th> <uni-th align="center">诊室</uni-th> <uni-th align="center">状态</uni-th> </uni-tr> <uni-tr v-for="item in Now" :key="item.id" v-if="item.calltime>timenow && item.part === 0"> <uni-td align="center">{{ item.num }} {{ item.name }}</uni-td> <uni-td align="center">小部位-激光脱毛</uni-td> <uni-td align="center">{{ item.room }}号诊室</uni-td> <uni-td align="center">已叫号</uni-td> </uni-tr> <uni-tr v-for="item in Now" :key="item.id" v-if="item.calltime==null && item.part === 0"> <uni-td align="center">{{ item.num }} {{ item.name }}</uni-td> <uni-td align="center">小部位-激光脱毛</uni-td> <uni-td align="center">---</uni-td> <uni-td align="center">等待中</uni-td> </uni-table>

你可以尝试使用计算属性来处理空行的填充。具体代码如下：

<uni-table emptyText="暂无更多数据">
  <uni-tr>
    <uni-th align="center">号码/姓名</uni-th>
    <uni-th align="center">项目</uni-th>
    <uni-th align="center">诊室</uni-th>
    <uni-th align="center">状态</uni-th>
  </uni-tr>
  <uni-tr v-for="item in filteredData" :key="item.id">
    <uni-td align="center">{{ item.num }} {{ item.name }}</uni-td>
    <uni-td align="center">小部位-激光脱毛</uni-td>
    <uni-td align="center">{{ item.room || '---' }}号诊室</uni-td>
    <uni-td align="center">{{ item.calltime ? '已叫号' : '等待中' }}</uni-td>
  </uni-tr>
</uni-table>

computed: {
  filteredData() {
    const data = this.Now.filter(item => item.part === 0 && item.calltime > this.timenow);
    const rows = 6 - data.length % 6;
    if (rows < 6) {
      for (let i = 0; i < rows; i++) {
        data.push({ id: i });
      }
    }
    return data;
  },
},

这个计算属性会先筛选出符合条件的数据，然后计算需要填充的行数，最后通过循环添加空数据来实现。在模板中，使用 `filteredData` 来渲染表格。在诊室这一列，如果没有数据，则会显示三个横杠。在状态这一列，根据 `calltime` 是否为空来判断是已叫号还是等待中。