可编辑表格

该内容是实现表格内容的新增、编辑和删除操作

效果图如下：

一、添加表格各个属性

<a-table style="width: 1200px;margin-left: 20px;border-collapse: collapse;" :columns="Columns"  bordered :pagination="false"
      :scroll="{ y: 120 }" >
        <template #bodyCell="{ column, text, record }">
          
        </template>
      </a-table>

const Columns = [
  { title: '字段英文名称', dataIndex: "fieldEname", width: '7%',fixed: 'left', align: 'center'},
  { title: '字段中文名称', dataIndex: "fieldCname",width: '7%', align: 'center'},
  { title: '字段说明', dataIndex: "fieldDesc",width: '30%', align: 'center'},
  { title: '标准映射', dataIndex: "standardId",width: '15%', align: 'center'},
  { title: '操作', dataIndex: "methods",width: '7%', align: 'center'}
];

注意：可自行修改

二、添加新增绑定事件

 <div>
      <a-button @click="Addfield" style="color: #fff;margin-left: 40px;margin-top: 10px;" type="primary">添加字段</a-button>
    </div>

注意：可自行修改

三、添加数据源绑定以及可编辑表格实现

3.1根据需求添加渲染逻辑

<a-table style="width: 1200px;margin-left: 20px;border-collapse: collapse;" :columns="Columns" :dataSource="dataSource" bordered :pagination="false"
      :scroll="{ y: 120 }" >
        <template #bodyCell="{ column, text, record }">
          <template v-if="['fieldCname', 'fieldEname', 'fieldDesc'].includes(column.dataIndex)">
            <div>
              <a-input
                v-if="editableData[record.id]"
                v-model:value="editableData[record.id][column.dataIndex]"
                style="margin: -5px 0"
              />
              <template v-else>
                {{ text }}  
              </template>
            </div>
          </template>

          <template v-else-if="column.dataIndex === 'standardId'">
            <a-select v-if="editableData[record.id]" v-model:value="editableData[record.id][column.dataIndex]" style="width: 200px;">
              <a-select-option value="1">BZ0001 企业名称 name</a-select-option>
              <!-- 添加更多选项 -->
            </a-select>
            <template v-else>
              {{ text }}
            </template>
          </template>

          <template v-else-if="column.dataIndex === 'methods'">
            <div class="editable-row-operations">
              <span v-if="editableData[record.id]">
                <a-typography-link @click="save(record.id)" style="margin-right: 10px;color: #00BFFF;">保存</a-typography-link>
                <a-popconfirm title="确认取消编辑吗?" @confirm="cancel(record.id)">
                  <a style="color: #00BFFF;">取消</a>
                </a-popconfirm>
              </span>
              <span v-else>
                <a @click="edit(record.id)" style="margin-right: 10px;color: #00BFFF;">编辑</a>
                <a-popconfirm
                  v-if="dataSource.length"
                  title="确定删除吗?"
                  @confirm="remove(record.id)"
                >
                  <a style="color: #00BFFF;">删除</a>
                </a-popconfirm>
              </span>
            </div>
          </template>
        </template>
      </a-table>

3.2添加可编辑表格逻辑

const dataSource = ref([]);
const editableData = reactive({});
const edit = id => {
  editableData[id] = cloneDeep(dataSource.value.filter(item => id === item.id)[0]);
};
const save = id => {
  Object.assign(dataSource.value.filter(item => id === item.id)[0], editableData[id]);
  delete editableData[id];
};
const remove  = id =>{
  dataSource.value = dataSource.value.filter(item => item.id !== id);
}
const cancel = id => {
  delete editableData[id];
};

3.3添加新增表格内容

const Addfield = () => {
  // 检查 dataSource 是否已定义s
  if (!dataSource.value) {
    dataSource.value = [];
  }
  // 生成新的行数据
  const newRow = {
    id: Date.now(), // 使用时间戳作为新行的 key，确保唯一性
    fieldCname: '阿萨大大', // 新行的其他属性值设为默认值
    fieldEname: 'fghjk',
    fieldDesc: 'sdfghj',
    standardId:'BZ0001 企业名称 name'
  };
  // 将新行数据添加到表格数据源中
  dataSource.value.push(newRow);
};

注意：所有的表格参数以及样式可自行修改