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>