lanan-repair/pages-order/ticketsItem/ticketsItem.vue

<template>
  <view>
    <view class="i_title">
      {{itemTitle}}
    </view>
    <view>
		<uni-table empty-text="暂无数据" border stripe>
			<uni-tr>
				<uni-th width="100">名称</uni-th>
				<uni-th width="50">单价</uni-th>
				<uni-th width="50">数量</uni-th>
				<uni-th width="50">合计</uni-th>
				<uni-th width="100">备注</uni-th>
			</uni-tr>
			<uni-tr v-for="(item, index) in list" :key="index">
				<uni-td>{{item[title].name}}</uni-td>
				<uni-td>{{item.itemPrice}}</uni-td>
				<uni-td>{{item.itemCount}}</uni-td>
				<uni-td>{{item.itemMoney}}</uni-td>
				<uni-td>{{item.remark}}</uni-td>
			</uni-tr>
		</uni-table>
     <!-- <table class="i_table">
        <thead>
          <tr>
            <th>名称</th>
            <th>单价</th>
            <th>数量</th>
            <th>合计</th>
            <th>备注</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in list">
            <td>{{item[title].name}}</td>
            <td>{{item.itemPrice}}</td>
            <td>{{item.itemCount}}</td>
            <td>{{item.itemMoney}}</td>
            <td>{{item.remark}}</td>
          </tr>
        </tbody>
      </table> -->
    </view>
  </view>
</template>

<script>
export default {
  name: "ticketsItem",
  props:{
    list: {
      type: Array,
      default: () => {return []}
    },
    title: {
      type: String,
      defalut: ""
    }
  },
  data:{
    itemTitle: null
  },
  created(){
    this.getTitle()
  },
  methods:{
    getTitle(){
      switch (this.title){
        case "project":
          this.itemTitle =  "项目"
          break
        case "wares":
          this.itemTitle =   "配件"
          break
        case "others":
          this.itemTitle =   "其他"
          break
        default:
          return ""
      }
    }
  }
}
</script>

<style scoped lang="less">
.i_table{
  width: 100%;
  text-align: center;
}
.i_title{
  font-size: 1.2rem;
}
</style>