table-opinion.vue 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. <template>
  2. <HcTable ui="no-border" border :column="tableColumn" :datas="tableData" :loading="tableLoading">
  3. <template #key2="{ row }">
  4. <span class="text-blue text-hover">{{ row.key2 }}</span>
  5. </template>
  6. <template #key3="{ row }">
  7. <el-input v-if="row.isEdit" v-model="row.key3" placeholder="请输入抽检意见" />
  8. <span v-else>{{ row.key3 }}</span>
  9. </template>
  10. <template #action="{ row }">
  11. <el-button v-if="row.isEdit" type="success" size="small" @click="saveClick(row)">
  12. 保存
  13. </el-button>
  14. <el-button v-else type="primary" size="small" @click="editClick(row)">
  15. 编辑
  16. </el-button>
  17. <el-button type="danger" size="small" @click="delClick(row)">
  18. 删除
  19. </el-button>
  20. </template>
  21. </HcTable>
  22. </template>
  23. <script setup>
  24. import { onMounted, ref } from 'vue'
  25. import { getArrValue } from 'js-fast-way'
  26. //参数
  27. const props = defineProps({
  28. projectId: {
  29. type: [String, Number],
  30. default: '',
  31. },
  32. contractId: {
  33. type: [String, Number],
  34. default: '',
  35. },
  36. })
  37. //变量
  38. const projectId = ref(props.projectId)
  39. const contractId = ref(props.contractId)
  40. //渲染完成
  41. onMounted(() => {
  42. })
  43. //表格数据
  44. const tableColumn = ref([
  45. { key:'key1', name: '抽检所属', width: 180 },
  46. { key:'key2', name: '案卷题名' },
  47. { key:'key3', name: '抽检意见' },
  48. { key:'action', name: '操作', width: 140, align: 'center' },
  49. ])
  50. const tableData = ref([
  51. {
  52. id: 1,
  53. key1: '施工',
  54. key2: '安康至来凤国家高速公路....',
  55. key3: '这是专家抽检意见xxxxx',
  56. },
  57. {
  58. id: 2,
  59. key1: '业主',
  60. key2: '安康至来凤国家高速公路....',
  61. key3: '这是专家抽检意见xxxxx',
  62. },
  63. ])
  64. const tableLoading = ref(false)
  65. //编辑
  66. const editClick = (row) => {
  67. row.isEdit = true
  68. }
  69. //保存
  70. const saveClick = (row) => {
  71. row.isEdit = false
  72. }
  73. //删除
  74. const delClick = (row) => {
  75. }
  76. </script>
  77. <style lang="scss" scoped>
  78. </style>