table-opinion.vue 2.1 KB

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