kktable

<template>
  <div>
    <a-table
      :columns="columns"
      :data-source="dataSource"
      :scroll="{ x: 1500, y: 300 }"
    >
      <template slot="centerSource" slot-scope="text, record">
        <editable-cell
          :text="text"
          @change="onCellChange(record.key, 'centerSource', $event,text)"
        />
      </template>
      <!-- 下拉框的修改 -->
       <template slot="centerSource4" slot-scope="text, record">
        <editable-cell
          :text="text"
          @change="onCellChange(record.key, 'centerSource4', $event,text)"
        />
      </template>
      <template slot="uploadImg" slot-scope="text, record">
        <a
          href="javascript:;"
          @click="uploadImg(record.key, 'uploadImg', $event)"
          >操作按钮</a
        >
      </template>
    </a-table>
    <a-button class="editable-add-btn" @click="handleAdd"> 提交 </a-button>
  </div>
</template>

<script>
import EditableCell from "./edit.vue";
export default {
  components: {
    EditableCell,
  },

  data() {
    return {
      list:[],
      columns: [],
      dataSource: [],
      selectedRowKeys: [],
      //  左侧固定列
      leftArr: [
        {
          title: "苹果",
          width: 100,
          dataIndex: "apple",
          key: "apple",
          fixed: "left",
        },
        {
          title: "橘子",
          width: 100,
          dataIndex: "orange",
          key: "orange",
          fixed: "left",
        },
      ],
      //   右侧固定列
      rightArr: [
        {
          title: "图片上传",
          key: "uploadImg",
          fixed: "right",
          width: 100,
          scopedSlots: { customRender: "uploadImg" },
        },
      ],
    };
  },
  computed: {},
  mounted() {
    this.init();
  },
  methods: {
    init() {
      // 一下所有循环的数量，可根据后台返回的数据长度做修改
      // 以下数据都可根据后台返回遍历填写变量即可
      // 数据源
      for (let i = 0; i < 5; i++) {
        let data = {
          key: i,
          apple: `不可编辑${i}`,
          orange: `不可编辑${i}`,
          banana: `不可编辑${i}`,
          centerSource:`假数据${i}`,
        };
        // 动态生成多列中间的数据，并且一一对应
        for (let j = 0; j < 5; j++) {
          data[`centerSource${j}`] = `筛选${i}`;
        }
        this.dataSource.push(data);
      }
      // 中间动态列,默认有一列表头是下拉框，其余的可在前面插入，也可在后面插入
      let centerArr = [
        {
          title: "下拉框",
          dataIndex: "centerSource4",
          key: "scenterSource",
          width: 150,
          scopedSlots: { customRender: "centerSource4" },
          // 筛选列表
          filters: [
            {
              text: "筛选3",
              value: "筛选3",
            },
            {
              text: "筛选4",
              value: "筛选4",
            },
          ],
          // 筛选
          onFilter: (value, record) => {
            let res = record.centerSource4.indexOf(value) === 0;
            return res;
          },
        },
      ];
      // 组合中间列数据
      for (let i = 0; i < 4; i++) {
        if (i == 1) {
          // 再下拉框列前面插入
          centerArr.unshift({
            title: "水稻" + i,
            dataIndex: "centerSource" ,
            key: i,
            width: 150,
            scopedSlots: { customRender: "centerSource" },
          });
        } else {
          // 再下拉框列后面插入
          centerArr.push({
            title: "水稻" + i,
            dataIndex: "centerSource" ,
            key: i,
            width: 150,
            scopedSlots: { customRender: "centerSource" },
          });
        }
      }
      // 右侧固定列
      for (let i = 0; i < 1; i++) {
        this.rightArr.unshift({
          title: "香蕉" + i,
          dataIndex: "banana",
          key: "banana" + i,
          fixed: "right",
          width: 100,
        });
      }
      //   最终所有数据
      this.columns = this.leftArr.concat(centerArr, this.rightArr);
    },
    // 操作按钮
    uploadImg() {
      console.log("操作按钮");
    },
    // 可编辑
    onCellChange(key, dataIndex, value,text) {
      const dataSource = [...this.dataSource];
      const target = dataSource.find((item) => item.key === key);
      if (target) {
        target[dataIndex] = value;
        this.dataSource = dataSource;
      }
    },
    handleAdd() {
      alert(JSON.stringify(this.dataSource))
      console.log(this.dataSource, "12321");
    },
  },
  filters: {},
};
</script>

<style scoped lang=''>
.editable-add-btn{
  float: right;
  margin-right: 1rem;
}
</style>