f8a4cbe06c2444b7e3a82cd883d61db68daf9161.svn-base 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. <template>
  2. <el-table :data="list" style="width: 100%;padding-top: 15px;">
  3. <el-table-column label="Order_No" min-width="200">
  4. <template slot-scope="scope">
  5. {{ scope.row.order_no | orderNoFilter }}
  6. </template>
  7. </el-table-column>
  8. <el-table-column label="Price" width="195" align="center">
  9. <template slot-scope="scope">
  10. ¥{{ scope.row.price | toThousandFilter }}
  11. </template>
  12. </el-table-column>
  13. <el-table-column label="Status" width="100" align="center">
  14. <template slot-scope="{row}">
  15. <el-tag :type="row.status | statusFilter">
  16. {{ row.status }}
  17. </el-tag>
  18. </template>
  19. </el-table-column>
  20. </el-table>
  21. </template>
  22. <script>
  23. import { transactionList } from '@/api/remote-search'
  24. export default {
  25. filters: {
  26. statusFilter(status) {
  27. const statusMap = {
  28. success: 'success',
  29. pending: 'danger'
  30. }
  31. return statusMap[status]
  32. },
  33. orderNoFilter(str) {
  34. return str.substring(0, 30)
  35. }
  36. },
  37. data() {
  38. return {
  39. list: null
  40. }
  41. },
  42. created() {
  43. this.fetchData()
  44. },
  45. methods: {
  46. fetchData() {
  47. transactionList().then(response => {
  48. this.list = response.data.items.slice(0, 8)
  49. })
  50. }
  51. }
  52. }
  53. </script>