vue3.0實戰a-form，a-table，動態編輯行。

 

<template>
  <div>
    <a-row class="mian" type="flex" justify="space-between">
      <a-form
        :model="state"
        layout="inline"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        style="width: 100%"
      >
        <a-form-item label="姓名" class="left_box">
          <a-input v-model:value="state.screen.studentName" />
        </a-form-item>
        <a-form-item class="right_box" :wrapper-col="{ offset: 120 }">
          <a-button type="primary" @click="onSubmit()">查詢</a-button>
          <a-button style="margin-left: 10px">重置</a-button>
        </a-form-item>
      </a-form>
    </a-row>
    <a-row>
      <a-table
        :loading="loading"
        :columns="columns"
        :data-source="dataSource"
        bordered
        :rowKey="(record) => record.id"
        :pagination="pagination"
      >
        <template
          v-for="col in [
            'studentId',
            'studentName',
            'sex',
            'birthDay',
            'idNumber',
            'professionName',
            'collegeName',
            'className',
            'admissionDate',
            'graduationDate',
          ]"
          #[col]="{ text, record }"
          :key="col"
        >
          <div>
            <a-input
              v-if="editableData[record.key]"
              v-model:value="editableData[record.key][col]"
              style="margin: -5px 0"
            />
            <template v-else>
              {{ text }}
            </template>
          </div>
        </template>
        <template #operation="{ record }">
          <div class="editable-row-operations">
            <span v-if="editableData[record.key]">
              <a @click="save(record)">保存</a>
              <a-popconfirm title="確認取消?" @confirm="cancel(record.key)">
                <a>取消</a>
              </a-popconfirm>
            </span>
            <span v-else>
              <a @click="edit(record)">編輯</a>
            </span>
          </div>
        </template>
        <!-- <template #confirmStatus="{ record }">
          <span v-if="record.confirmStatus">
            是
          </span>
          <span v-else>否</span>
        </template> -->
      </a-table>
    </a-row>
  </div>
</template>

<script>
  import { studentList, createOrUpdate } from '@/api/table'
  import { cloneDeep } from 'lodash-es'
  import { onMounted, defineComponent, reactive, toRefs, ref } from 'vue'
  import { useRouter } from 'vue-router' //引入路由
  const columns = [
    {
      title: '學號',
      dataIndex: 'studentId',
      // width: '25%',
      key: 'studentId',
      slots: {
        customRender: 'studentId',
      },
    },
    {
      title: '姓名',
      dataIndex: 'studentName',
      // width: '15%',
      key: 'studentName',
      slots: {
        customRender: 'studentName',
      },
    },
    {
      title: '性別',
      dataIndex: 'sex',
      // width: '40%',
      key: 'sex',
      slots: {
        customRender: 'sex',
      },
    },
    {
      title: '出生日期',
      dataIndex: 'birthDay',
      key: 'birthDay',
      slots: {
        customRender: 'birthDay',
      },
    },
    {
      title: '身份證號碼',
      dataIndex: 'idNumber',
      key: 'idNumber',
      slots: {
        customRender: 'idNumber',
      },
    },
    {
      title: '專業名稱',
      dataIndex: 'professionName',
      key: 'professionName',
      slots: {
        customRender: 'professionName',
      },
    },
    {
      title: '學院名稱',
      dataIndex: 'collegeName',
      key: 'collegeName',
      slots: {
        customRender: 'collegeName',
      },
    },
    {
      title: '班級名稱',
      dataIndex: 'className',
      key: 'className',
      slots: {
        customRender: 'className',
      },
    },
    {
      title: '入學日期',
      dataIndex: 'admissionDate',
      key: 'admissionDate',
      slots: {
        customRender: 'admissionDate',
      },
    },
    {
      title: '畢業日期',
      dataIndex: 'graduationDate',
      key: 'graduationDate',
      slots: {
        customRender: 'graduationDate',
      },
    },
    {
      title: '查詢次數',
      dataIndex: 'queryCount',
      key: 'queryCount',
      slots: {
        customRender: 'queryCount',
      },
    },
    {
      title: '是否鎖定',
      dataIndex: 'confirm',
      key: 'confirm',
      slots: {
        customRender: 'confirm',
      },
    },
    {
      title: '修改狀態',
      dataIndex: 'updateStatus',
      key: 'updateStatus',
      slots: {
        customRender: 'updateStatus',
      },
    },
    {
      title: '操作',
      dataIndex: 'operation',
      width: '8%',
      slots: {
        customRender: 'operation',
      },
    },
  ]
  //   defineComponent對 setup的分裝
  export default defineComponent({
    setup() {
      // const state=reactive({count:0}) //得到的state類似於vue2.x中date返回的響應式數據對象
      // 類似vue2.0中的data狀態管理
      //  在setup()函數中調用reactive（）函數創建響應式數據對象
      const state = reactive({
        loading: false,
        names: '',
        dataSource: [],
        pagination: {
          total: 0,
          pageSize: 10, //每頁中顯示10條數據
          showSizeChanger: true,
          current: 1,
          pageSizeOptions: ['10', '20', '50', '100'], //每頁中顯示的數據
          showTotal: (total) => `共有 ${total} 條數據`, //分頁中顯示總的數據
        },
        loadings: false,
        screen: {
          verificationId: '',
          studentName: '',
        },
      })
      // 為基本數據類型添加響應式狀態
      const name = ref('我是聲明新變量') //聲明新變量 如同vue2.0的 let name='聲明新變量'
      // 為復雜數據類型添加響應式狀態
      // const state = ref({
      //   count: 0
      // })

      // 打印name的值
      console.log(name.value)
      // 打印count的值
      // console.log(state.value.count)
      //路由
      const router = useRouter()

      // console.log(router.currentRoute.value.query.id);//獲取參數
      // const dataSource = state.dataSource
      const editableData = reactive({})

      const edit = (val) => {
        console.log(val)
        editableData[val.key] = cloneDeep(
          state.dataSource.filter((item) => val.key === item.key)[0]
        )
      }

      const save = (val) => {
        Object.assign(
          state.dataSource.filter((item) => val.key === item.key)[0],
          editableData[val.key]
        )
        delete editableData[val.key]
        createOrUpdateList(val)
      }
      const createOrUpdateList = (val) => {
        createOrUpdate(val).then((res) => {
          if (res.code == 0) {
            console.log('修改成功')
          }
        })
      }

      const cancel = (key) => {
        delete editableData[key]
      }
      const onSubmit = () => {
        getStudentList(state.pagination.current, state.pagination.pageSize)
      }
      const getStudentList = (current, pageSize) => {
        state.screen.page = current
        state.screen.pageSize = pageSize
        state.screen.verificationId = router.currentRoute.value.query.id
        state.loading = true
        studentList(state.screen)
          .then((res) => {
            if (res.code == '0' && res.data.items.length > 0) {
              const List = []
              res.data.items.map((item) => {
                return List.push(
                  Object.assign({}, item, {
                    key: item.id.toString(),
                    confirm: item.confirmStatus == 'true' ? '是' : '否',
                  })
                )
              })
              state.dataSource = List
              state.loading = false
            } else {
              state.dataSource = []
              state.loading = false
            }
            state.pagination.pageSize = res.data.pageSize
            state.pagination.current = res.data.pageNo
            state.pagination.total = res.data.count
          })
          .catch(() => {
            state.dataSource = []
            state.loading = false
          })
      }
      //初始化
      onMounted(() => {
        onSubmit()
      })
      //   暴漏給template
      return {
        //   state 將響應式數據對象return出去供template使用
        state,
        // es6重新賦值
        ...toRefs(state), // 必須使用后toRefs具體自行百度
        columns,
        editingKey: '',
        editableData,
        labelCol: {
          span: 4,
        },
        wrapperCol: {
          span: 14,
        },
        edit,
        save,
        cancel,
      }
    },
  })
</script>

<style scoped lang="less">
  .ant-table-wrapper {
    width: 100%;
    zoom: 1;
  }
  .editable-row-operations a {
    margin-right: 8px;
  }
  .mian {
    padding-bottom: 13px;
    margin-bottom: 20px;
    overflow: hidden;
    border-bottom: 1px #ccc solid;
    .right_box {
      float: right;
      // width: 20%;
    }
  }
</style>