(vue)vue+iview 动态循环表头+编辑单元格

(vue)vue+iview 动态循环表头+编辑单元格

效果：

需求:
1.动态循环后端返回的表头 及 表格数据
3.编辑table里的 单元格

      <Table
        ref="selection"
        :columns="columns"
        :data="tableData1"
        @on-selection-change="handleSelectChange"
      >
        <template
          slot-scope="{ row, column, index }"
          :slot="item.slot"
          v-for="(item, index) in columns.slice(1)"
        >
          <Input
            v-model="tableData1[index][column.slot]"
            v-if="
              selectedCell.rowIndex == index &&
              selectedCell.columnIndex == column.slot
            "
            @on-enter="
              initSelectedCell(row, tableData1[index][column.slot], item.slot)
            "
          />
          <!-- 显示内容 -->
          <div v-else>
            <div @click="editCellData(row, column, index)">
              {{ row[item.slot] }}
            </div>
          </div>
        </template>
        <template slot-scope="{ row, index }" slot="operation">
          <el-button type="text" @click="editRow(row, index)">编辑</el-button>
          <el-button type="text" @click="deleteRow(row, index)">删除</el-button>
        </template>
      </Table>

js

data(){
	return {
		columns: [],
        tableData1: [],
        selectedCell: {
          columnIndex: "",
          rowIndex: "",
        },
        columns1: [
        {
          type: "selection",
          width: 60,
          align: "center",
        },
        {
          title: "名称",
          slot: "name",
          align: "center",
        },
        {
          title: "别名",
          slot: "otherName",
          align: "center",
        },
        {
          title: "英文名",
          slot: "enName",
          align: "center",
        },
        {
          title: "出生地",
          slot: "place",
          align: "center",
        },
        {
          title: "出生日期",
          slot: "birthday",
          align: "center",
        },
        {
          title: "操作",
          slot: "operation",
          align: "center",
        },
      ],
      tableData11: [
        {
          name: "张三",
          otherName: "三三",
          enName: "zhangsan",
          place: "北京",
          birthday: "2022-09-16",
        },
        {
          name: "李四",
          otherName: "四四",
          enName: "lisi",
          place: "上海",
          birthday: "2022-09-20",
        },
      ],
	}
}
//监听表头和表格数据
watch: { 
  columns: {
    deep: true,
    immediate: true,
    handler(n) {
      this.columns = n;
    },
  },
  tableData1: {
    deep: true,
    immediate: true,
    handler(n) {
      this.tableData1 = n;
    },
  },
},

方法：

methods:{
	//属性对比
    handleParam(row, index) {
      this.compare = true;
      this.columns = this.columns1;
      this.tableData1 = this.tableData11;
    },
    // 关闭Input框
    clearInput() {
      this.selectedCell.rowIndex = "";
      this.selectedCell.columnIndex = "";
    },
    initSelectedCell() {
      // 单元格数据不输入给默认值
      let columnData = this.selectedCell.columnIndex;
      let rowData = this.selectedCell.rowIndex;
      if (
        this.tableData1[rowData][columnData] == null ||
        this.tableData1[rowData][columnData] == ""
      ) {
        this.tableData1[rowData][columnData] = 0;
      }
      this.selectedCell.rowIndex = "";
      this.selectedCell.columnIndex = "";
    },
    //编辑单元格
    editCellData(row, column, index) {
      this.selectedCell.rowIndex = index;
      this.selectedCell.columnIndex = column.slot;
    },
}

案例二：动态获取表头且不显示具有隐藏属性的列

  <Table
    ref="selection"
    :columns="colHidden"
    :data="tableDataNew"
    @on-selection-change="handleSelectChange"
  >
    <template
      slot-scope="{ row, column, index }"
      :slot="item.slot"
      v-for="(item, index) in colHidden"
    >
      {{ row[item.slot] }}
    </template>
  </Table>

  data() {
    return { 
      columns: [
        {
          title: "条件",
          slot: "condition",
          align: "center", 
          hidden:true,  //隐藏属性，此列不显示
        },
        {
          title: "内容",
          slot: "content",
          align: "center",
          ellipsis: true,
        }, 
      ],
      }
   }
  computed: { 
    colHidden: function () {
      return this.columns.filter(function (e) {
        return !e.hidden;
      });
    },
  },
  //给表头和数据加监听，及时更新
  watch: {
    columns: {
      deep: true,
      immediate: true,
      handler(n) {
        this.columns = n;
      },
    },
    tableDataNew: {
      deep: true,
      immediate: true,
      handler(n) {
        this.tableDataNew = n;
      },
    }, 
  },

解决参考：
https://blog.csdn.net/canshegui2293/article/details/118414007

https://blog.csdn.net/qq_43469899/article/details/103488827

https://blog.csdn.net/qq_43469899/article/details/103526410?spm=1001.2014.3001.5501