Table.vue 2.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. <template>
  2. <el-table
  3. :data="tableData"
  4. border
  5. @selection-change="handleSelectionChange"
  6. style="width: 100%">
  7. <el-table-column
  8. type="selection"
  9. width="55">
  10. </el-table-column>
  11. <el-table-column
  12. prop="title"
  13. label="标题"
  14. :show-overflow-tooltip="true"
  15. width="360">
  16. </el-table-column>
  17. <el-table-column
  18. prop="intro"
  19. label="描述"
  20. :show-overflow-tooltip="true"
  21. width="360">
  22. </el-table-column>
  23. <el-table-column
  24. prop="pic"
  25. label="图片"
  26. width="300">
  27. <template slot-scope="scope">
  28. <el-image
  29. style="width: 200px;height: 200px"
  30. :src="scope.row.pic"
  31. fit="contain"></el-image>
  32. </template>
  33. </el-table-column>
  34. <el-table-column
  35. prop="startTime"
  36. label="发布时间"
  37. :show-overflow-tooltip="true"
  38. width="200">
  39. </el-table-column>
  40. <el-table-column
  41. prop="visits"
  42. label="访问次数"
  43. :show-overflow-tooltip="true"
  44. width="200">
  45. </el-table-column>
  46. <el-table-column
  47. label="操作"
  48. >
  49. <template slot-scope="scope">
  50. <el-button type="text" @click="handleEditor(scope.row)">编辑</el-button>
  51. <el-button type="text" v-if="false" @click="handleDelete(scope.row)">删除</el-button>
  52. </template>
  53. </el-table-column>
  54. </el-table>
  55. </template>
  56. <script>
  57. export default {
  58. name: 'Table',
  59. inject: {
  60. tableServiceData: {
  61. type: Object,
  62. default: () => {
  63. },
  64. },
  65. paginationServiceData: {
  66. type: Object,
  67. default: () => {
  68. },
  69. },
  70. },
  71. computed: {
  72. tableData() {
  73. return this.tableServiceData.myData;
  74. },
  75. },
  76. methods: {
  77. handleSelectionChange(data) {
  78. const arr = [];
  79. data.forEach(item => {
  80. arr.push(item.iiId)
  81. })
  82. this.$emit('select-change', arr);
  83. },
  84. handleEditor(data) {
  85. this.$emit('editor', data);
  86. },
  87. handleDelete(data) {
  88. this.$emit('delete', data);
  89. },
  90. },
  91. };
  92. </script>
  93. <style scoped>
  94. </style>