Vue使用AntDesign 表格可添加 可编辑行 可选择

Vue使用AntDesign 表格可添加 可编辑行 可选择

使用的是这个进行修改的，这个是绑定的数组，多以直接在里面多加一行空数据就可进行编辑
在<template></template>中 只是多了一个添加的按钮

<template>
  <div class="map">
  	<!-- 添加行的按钮 -->
    <button @click="add">添加</button>

  	<!-- 显示的表格 -->
    <a-table
      :columns="columns"
      :data-source="data"
      bordered
    >
      <template v-for="col in ['name', 'age', 'address']" :slot="col" slot-scope="text, record,">
        <div :key="col">
          <a-input
            v-if="record.editable"
            style="margin: -5px 0"
            :value="text"
            @change="e => handleChange(e.target.value, record.key, 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="() => save(record.key)">保存</a>
            <a-popconfirm
              title="确定取消?"
              okText="确定"
              cancelText="取消"
              @confirm="() => cancel(record.key)"
            >
              <a>取消</a>
            </a-popconfirm>
          </span>
          <span v-else>
            <a :disabled="editingKey !== ''" @click="() => edit(record.key)">修改</a>
          </span>
        </div>
      </template>
    </a-table>
  </div>
</template>

在<script></script>

<script>
//显示的表头
const columns = [
  {
    title: "name",
    dataIndex: "name",
     "25%",
    scopedSlots: { customRender: "name" }
  },
  {
    title: "age",
    dataIndex: "age",
     "15%",
    scopedSlots: { customRender: "age" }
  },
  {
    title: "address",
    dataIndex: "address",
     "40%",
    scopedSlots: { customRender: "address" }
  },
  {
    title: "operation",
    dataIndex: "operation",
    scopedSlots: { customRender: "operation" }
  }
];
//列表绑定的数组
const data = [];
// 数组创建时候的下标
var numbe = 0;

export default {
  data() {
  //这是将数组里面的值单列出来  用的是ES6的语法   （在添加的方法里面也进行调用 因为数据变化了 所以取值）
    this.cacheData = data.map(item => ({ ...item }));
    return {
      data,
      columns,
      editingKey: "",
      selectedRowKeys: []
    };
  },
  methods: {
  //书写添加的按钮
    add() {
      data.push({
        key: numbe.toString(),
        name: "",
        age: "",
        address: ""
      });
      numbe++;
      //console.log(data);
      //重新取值
      this.cacheData = data.map(item => ({ ...item }));
    },
    handleChange(value, key, column) {
      const newData = [...this.data];
      const target = newData.filter(item => key === item.key)[0];
      if (target) {
        target[column] = value;
        this.data = newData;
      }
    },
    edit(key) {
      const newData = [...this.data];
      const target = newData.filter(item => key === item.key)[0];
      this.editingKey = key;
      if (target) {
        target.editable = true;
        this.data = newData;
      }
    },
    save(key) {
      const newData = [...this.data];
      const newCacheData = [...this.cacheData];
      const target = newData.filter(item => key === item.key)[0];
      const targetCache = newCacheData.filter(item => key === item.key)[0];
      if (target && targetCache) {
        delete target.editable;
        this.data = newData;
        Object.assign(targetCache, target);
        this.cacheData = newCacheData;
      }
      this.editingKey = "";
    },
    cancel(key) {
      const newData = [...this.data];
      const target = newData.filter(item => key === item.key)[0];
      this.editingKey = "";
      if (target) {
        Object.assign(
          target,
          this.cacheData.filter(item => key === item.key)[0]
        );
        delete target.editable;
        this.data = newData;
      }
    },
    onSelectChange(selectedRowKeys) {
      console.log("selectedRowKeys changed: ", selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    }
  },
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0;
    }
  }
};
</script>

这样就可以进点击按钮添加数据了

在表格里面进行添加复选框

//在table上面书写结构
    <span style="margin-left: 8px">
      <template v-if="hasSelected">{{ `Selected ${selectedRowKeys.length} items` }}</template>
    </span>
//在table上面添加这个  将值传入
 :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"

//data里面添加数据
selectedRowKeys: [], // Check here to configure the default column
//添加改变的方法调用
onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
 },
//添加计算属性 
computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0;
    },
 },

然后是全部代码

<template>
  <div>
    <button @click="add">添加</button>

    <span style="margin-left: 8px">
      <template v-if="hasSelected">{{ `Selected ${selectedRowKeys.length} items` }}</template>
    </span>
    <a-table
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      :columns="columns"
      :data-source="data"
      bordered
    >
      <template v-for="col in ['name', 'age', 'address']" :slot="col" slot-scope="text, record,">
        <div :key="col">
          <a-input
            v-if="record.editable"
            style="margin: -5px 0"
            :value="text"
            @change="e => handleChange(e.target.value, record.key, 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="() => save(record.key)">保存</a>
            <a-popconfirm
              title="确定取消?"
              okText="确定"
              cancelText="取消"
              @confirm="() => cancel(record.key)"
            >
              <a>取消</a>
            </a-popconfirm>
          </span>
          <span v-else>
            <a :disabled="editingKey !== ''" @click="() => edit(record.key)">修改</a>
          </span>
        </div>
      </template>
    </a-table>
  </div>
</template>
<script>
const columns = [
  {
    title: "name",
    dataIndex: "name",
     "25%",
    scopedSlots: { customRender: "name" }
  },
  {
    title: "age",
    dataIndex: "age",
     "15%",
    scopedSlots: { customRender: "age" }
  },
  {
    title: "address",
    dataIndex: "address",
     "40%",
    scopedSlots: { customRender: "address" }
  },
  {
    title: "operation",
    dataIndex: "operation",
    scopedSlots: { customRender: "operation" }
  }
];

const data = [];
// 数组创建时候的下标
var numbe = 0;
export default {
  data() {
    this.cacheData = data.map(item => ({ ...item }));
    return {
      data,
      columns,
      editingKey: "",
      selectedRowKeys: []
    };
  },
  methods: {
    add() {
      data.push({
        key: numbe.toString(),
        name: "",
        age: "",
        address: ""
      });
      numbe++;
      console.log(data);
      this.cacheData = data.map(item => ({ ...item }));
    },
    handleChange(value, key, column) {
      const newData = [...this.data];
      const target = newData.filter(item => key === item.key)[0];
      if (target) {
        target[column] = value;
        this.data = newData;
      }
    },
    edit(key) {
      const newData = [...this.data];
      const target = newData.filter(item => key === item.key)[0];
      this.editingKey = key;
      if (target) {
        target.editable = true;
        this.data = newData;
      }
    },
    save(key) {
      const newData = [...this.data];
      const newCacheData = [...this.cacheData];
      const target = newData.filter(item => key === item.key)[0];
      const targetCache = newCacheData.filter(item => key === item.key)[0];
      if (target && targetCache) {
        delete target.editable;
        this.data = newData;
        Object.assign(targetCache, target);
        this.cacheData = newCacheData;
      }
      this.editingKey = "";
    },
    cancel(key) {
      const newData = [...this.data];
      const target = newData.filter(item => key === item.key)[0];
      this.editingKey = "";
      if (target) {
        Object.assign(
          target,
          this.cacheData.filter(item => key === item.key)[0]
        );
        delete target.editable;
        this.data = newData;
      }
    },
    onSelectChange(selectedRowKeys) {
      console.log("selectedRowKeys changed: ", selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    }
  },
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0;
    }
  }
};
</script>
<style scoped>
.editable-row-operations a {
  margin-right: 8px;
}
</style>