ant-design-vue 问题记录

table

做可编辑行时，因为选择其中一个展示列作为了key，所以在整行编辑的时候，操作此列数据时发现每次输入后文本框都会失去焦点，导致体验很差，经过排查发现是因为此行数据作为了key值导致。

<template>
<a-table
  :columns="columns"
  :data-source="tableData"
  bordered
  :row-selection="rowSelection"
  :row-key="record => record.no"
  >
    <template
     v-for="col in ['code', 'name', 'site' ]"
     :slot="col"
     slot-scope="text, record"
    >
        <div :key="col">
            <a-input
                v-if="(record.editable && col != 'code') || (addTag && record.editable )"
                style="margin: -5px 0"
                :value="text"
                @change="e => handleChange(e.target.value, record.out_bank_code, col)"
            />
            <!-- <a-input
                v-if="record.editable"
                style="margin: -5px 0"
                :value="text"
                @change="e => handleChange(e.target.value, record.out_bank_code, col)"
            /> -->
            <template v-else>
            {{ text }}
            </template>
        </div>
    </template>

    <template slot="operation" slot-scope="text, record">
    <div class="editable-row-operations">
        <span v-if="record.editable">
        <a @click="saveModalVisible = true">保存</a>
        <a @click="() => rowCancel(record.code)">取消</a>
        </span>
        <span v-else>
        <a :disabled="editingKey !== ''" @click="() => doModify(record.out_bank_code)">修改</a>
        </span>
    </div>
    </template>
</a-table>
<a-modal
  title="提示"
   :visible="saveModalVisible"
   :confirm-loading="saveModalLoading"
   @ok="rowSave()"
   @cancel="saveModalVisible = false"
 >
   <p>确认保存吗？</p>
 </a-modal>
</template>

<script>
const columns = [
  {
    title: '编码',
    dataIndex: 'code',
    width: '10%',
    scopedSlots: { customRender: 'code' },
  },
  {
    title: '名称',
    dataIndex: 'name',
    width: '20%',
    scopedSlots: { customRender: 'name' },
  },
  {
    title: '地址',
    dataIndex: 'site',
    width: '50%',
    scopedSlots: { customRender: 'site' },
  },
  {
    title: '操作',
    dataIndex: 'operation',
    scopedSlots: { customRender: 'operation' },
  },
];
</script>

computed: {
    rowSelection() {
        const { selectedRowKeys } = this;
        return {
            selectedRowKeys,
            onChange: this.onChange
            // onChange: (selectedRowKeys,selectedRows) => {
            //     console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
            //     this.selectedRowKeys = selectedRowKeys;
            //     this.selectedRows = selectedRows
            // }
        }
    }
},

tree

因为树的数据是异步获取的，在使用defaultExpandAll后发现没有效果，查询得知该属性只在第一次渲染时生效，通过添加v-if进行控制。

<a-tree
      v-if="treeData.length"
     :showLine="false"
     :autoExpandParent="true"
     :checkable="false"
     :checkStrictly="false"
     :showIcon="false"
     :defaultExpandAll="true"
     :defaultExpandParent="true"
     :replaceFields="replaceFields"
     :treeData="treeData"
     :selectedKeys.sync="selectKeys"
     @select="onLeftTreeNodeSelect"
   >
</a-tree>

//左侧树相关
selectKeys: [],
selectKey: void(0), // 设置选中的树节点
treeData: [],
treeDataSource: [],
replaceFields: {
    children:'children',
    title:'codename', 
    key:'id'
},