element-ui中Table可编辑单元格,左右切换列表

效果图

 

<template>
  <div class="home">
    <el-table :data="tableData" style="width: 45%; margin: auto">
      <el-table-column
        v-for="(item, index) in tableFile"
        :key="index"
        :prop="item.attribute"
        :label="item.label"
        width="180"
        header-align="center"
        align="center"
      >
        <template slot="header">
          <div v-if="item.children && item.children.length > 0">
            <span style="margin-right: 10px" @click="handel(-1)"> 《 </span>
            {{ item.label }}
            <span style="margin-left: 10px" @click="handel(1)"> 》 </span>
          </div>
        </template>

        <template>
          <el-table-column
            v-for="(filed, i) in item.children"
            :key="i"
            :prop="filed.attribute"
            :label="filed.label"
            width="100"
            header-align="center"
            align="center"
          >
            <template slot-scope="scope">
              <el-input v-focus v-model="scope.row[filed.attribute]" v-if="scope.row.edit && editFont===filed.attribute" @blur="blurHandle(scope.row)"></el-input>
              <div @click="handleEdit(scope.row,filed.attribute)" v-else>{{scope.row[filed.attribute]}}</div>
            </template>
          </el-table-column>
        </template>

      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          nianji: '大一',
          banji: '计科二班',
          zhuanye: '计算机',
          math: 123,
          shu: 110,
          zheng: 80,
          provice: 'sss省',
          city: 'hh市',
          xian: 'nn县',
          edit: false
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
          nianji: '大一',
          banji: '计科二班',
          zhuanye: '计算机',
          math: 123,
          shu: 110,
          zheng: 80,
          provice: 'sss省',
          city: 'hh市',
          xian: 'nn县',
          edit: false
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          nianji: '大一',
          banji: '计科二班',
          zhuanye: '计算机',
          math: 123,
          shu: 110,
          zheng: 80,
          provice: 'sss省',
          city: 'hh市',
          xian: 'nn县',
          edit: false
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
          nianji: '大一',
          banji: '计科二班',
          zhuanye: '计算机',
          math: 123,
          shu: 110,
          zheng: 80,
          provice: 'sss省',
          city: 'hh市',
          xian: 'nn县',
          edit: false
        }
      ],
      tableFile: [
        {
          label: '日期',
          attribute: 'date'
        },
        {
          label: '姓名',
          attribute: 'name'
        }
      ],
      headList: [
        {
          label: '学院',
          attribute: 'school',
          index: 0,
          children: [
            {
              label: '年级',
              attribute: 'nianji'
            },
            {
              label: '班级',
              attribute: 'banji'
            },
            {
              label: '专业',
              attribute: 'zhuanye'
            }
          ]
        },
        {
          label: '成绩',
          attribute: 'grade',
          index: 1,
          children: [
            {
              label: '高数',
              attribute: 'math'
            },
            {
              label: '数据结构',
              attribute: 'shu'
            },
            {
              label: '政治',
              attribute: 'zheng'
            }
          ]
        },
        {
          label: '地址',
          attribute: 'address',
          index: 2,
          children: [
            {
              label: '省',
              attribute: 'provice'
            },
            {
              label: '市',
              attribute: 'city'
            },
            {
              label: '县',
              attribute: 'xian'
            }
          ]
        }
      ],
      headIndex: 0,
      editFont: null
    }
  },
  directives: {
    focus: {
      inserted: function (el) {
        el.querySelector('input').focus()
      }
    }
  },
  methods: {
    blurHandle (v) {
      v.edit = false
      this.editFont = null
    },
    handleEdit (v2, v3) {
      v2.edit = true
      this.editFont = v3
    },
    handel (v) {
      if (
        (this.headIndex === 0 && v < 0) ||
        (this.headIndex === this.headList.length - 1 && v > 0)
      ) { return null }

      this.headIndex += v

      const length = this.tableFile.length

      this.tableFile.splice(length - 1)
      this.tableFile.push(this.headList[this.headIndex])
    }
  },
  created () {
    this.tableFile.push(this.headList[this.headIndex])
  }
}
</script>