element el-table（表格/树形表格）添加、编辑、合并单元格_vue 树形结构单元格合并

---

1. vue el-table

给表格设置ref，给行设置高度:row-style="{height: '60px'}"，用于滚动
绑定key用于刷新表格

<el-table border ref="diffeDataTable" :data="TreeList" :row-style="{height: '60px'}" highlight-current-row row-key="id" :tree-props="{children: 'children'}" :span-method="arraySpanMethod" default-expand-all sorable="custom"  :key="MathRandom" @cell-dblclick="doubleClick">
  <el-table-column type="index" label="序号" width="55"> </el-table-column>
  <el-table-column prop="name" label="名称" min-width="300px" class-name="operate_name">
    <template slot-scope="scope">
      <el-input v-if="!!scope.row.addNew" :id="scope.row.id" :size="elTableTreeFormSize" v-model="scope.row.name"></el-input>
      <span v-else>{{ scope.row.name }}</span>
    </template>
  </el-table-column>
  <el-table-column prop="remark" label="备注" width="300">
    <template slot-scope="scope">
      <el-input v-if="!!scope.row.addNew" :size="elTableTreeFormSize" v-model="scope.row.remark"></el-input>
      <el-input v-else-if="!scope.row.addNew && scope.row[scope.column.property + 'Show']" :ref="scope.column.property" :id="scope.row.id" :size="elTableTreeFormSize" v-model="scope.row.remark" @blur="subEditForm(scope.row, scope.column)"></el-input>
      <span v-else>{{ scope.row.remark }}</span>
    </template>
  </el-table-column>
  <el-table-column fixed="right" label="操作" width="200" class-name="operate-button">
    <template slot-scope="scope" v-if="!!scope.row.parentId">
      <Buttons v-if="!!scope.row.addNew" type="primary" @parentClick="subNewRow(scope.row)">
        <span slot="title">保存</span>
      </Buttons>
      <Buttons v-else-if="scope.row.type ===0" type="primary" @parentClick="addEmptyRow(scope.row,scope.$index)">
        <span slot="title">新增</span>
      </Buttons>
    </template>
  </el-table-column>
</el-table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

---

2. 添加空行

给树形子级添加一行，滚动到添加行并聚焦

// 添加空行
addEmptyRow(row, index) {
  if (!row.children) {
    row.children = []
  }
  let obj = {
    id: "id-" + row.id,
    name: "",
    remark: "",
    addNew: true,
  }
  row.children.push(obj)
  // 定位/聚焦到新增行
  this.$nextTick(() => {
    this.$refs.diffeDataTable.bodyWrapper.scrollTop = (index + row.children.length - 2) * 60;
    $("#" + obj.id).focus()
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

---

3. 双击编辑并聚焦

// 编辑-双击单元格触发事件
doubleClick(row, column) {
  this.$set(row, column.property + 'Show', true)
  // 聚焦方法一：根据ref聚焦
  // 聚焦事件需要更新表格
  this.updateTable()
  this.$nextTick(() => {
    this.$refs[column.property] && this.$refs[column.property].focus()
  })
  // 聚焦方法二：根据id聚焦
  this.$nextTick(() => {
    $("#" + row.id).focus()
  })
},
// 编辑-输入框失焦事件
subEditForm(row, column) {
  row[column.property + 'Show'] = false
  // 请求后台，根据后端要求填写参数
},
// 更新表格
updateTable() {
  this.MathRandom = Math.random()
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

---

4. 合并单元格

// ------------------ 合并单元格 ------------------
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
  // 一级
  if (row.level == 0) {
    if (columnIndex === 1) {
      return [1, 6];
    } else if (columnIndex === 0) {
      return [0, 0];
    } else if (columnIndex === 2) {
      return [0, 0];
    } else if (columnIndex === 3) {
      return [0, 0];
    }
  }
  // 二级
  if (row.level === 1) {
    if (columnIndex === 1) {
      return [1, 5];
    } else if (columnIndex === 0) {
      return [0, 0];
    } else if (columnIndex === 2) {
      return [0, 0];
    } else if (columnIndex === 3) {
      return [0, 0];
    }
  }
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

---