table 可编辑

<template>
<div>
  <div class="table-box" :style="'width:'+width+'px;'+'max-height:'+height+'px'">
    <table cellspacing="0" cellpadding="0" border="0">
      <thead>
        <tr v-for="(i,index) in rownum" :key="index">
          <th>操作</th>
          <th v-for="(label,lindex) in thlabel[index]" :key="lindex">{{label.label}}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(data,dindex) in list" :key="dindex">
          <td @click="deletHandle(data,dindex)"><img src="../assets/delete_icon.png" alt="" class="delete-icon"></td>
          <td v-for="(key,index) in labelprop" :key="index"><input type="text" v-model="data[key]" /></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
</template>

<script>
let tableData = [{
    'a': '1',
    'b': '2',
    'c': '3',
    'd': '8',
  }, {
    'a': '4',
    'b': '5',
    c: '6',
    d: '9'
  },
  {
    'a': '1',
    'b': '2',
    'c': '3',
    'd': '8'
  }, {
    'a': '4',
    'b': '5',
    c: '6',
    d: '9'
  },
  {
    'a': '1',
    'b': '2',
    'c': '3',
    'd': '8'
  }, {
    'a': '4',
    'b': '5',
    c: '6',
    d: '9'
  }
]
let thlabel = [
  [{
    prop: 'a',
    label: '表头1'
  }, {
    prop: 'c',
    label: '表头2'
  }, {
    prop: 'b',
    label: '表头333333'
  }, {
    prop: 'd',
    label: '表头444444'
  }]
]
export default {
  props: {
    datat: {
      type: Array,
      required: true,
      default: tableData
    },
    thlabel: { //表头数组
      type: Array,
      required: true,
      default: thlabel
    },
    width: {
      type: Number,
      default: 300
    },
    height: {
      type: Number,
      default: 300
    }
  },
  data() {
    return {
      list: ''
    }
  },
  computed: {
    rownum: function() { //表头行数
      return this.thlabel.length;
    },
    labelprop: function() { //取出表头数据依次对应的字段key
      let thlab = this.thlabel;
      var ar = [];
      for (let i = 0; i < thlab.length; i++)
        for (let j = 0; j < thlab[i].length; j++) {
          for (var key in thlab[i][j]) {
            if (key == 'prop') {
              ar.push(thlab[i][j][key])
            }
          }
        }
      return ar;
    },
  },
  mounted: function() {},
  methods: {
    init() {
      this.list = JSON.parse(JSON.stringify(this.datat))
    },
    deletHandle(val, index) {
      this.list.splice(index, 1)
      this.$emit('remove', val, index)
    },
    saveHandle() {
      console.log(this.list, this.datat)
      this.$emit('success', this.list)
    }
  },
  watch: {
    datat: {
      handler() {
        this.init()
      },
      deep: true,
      immediate: true
    }
  }
}
</script>

<style lang="less" scoped>
.table-box {
  overflow: auto;
}

table {
  text-align: center;
  border-collapse: collapse;
}

table td {
  border: 1px solid #ebeef5;
  position: relative;
  color: #606266;
  min-width: 64px;
}

table th {
  text-align: center;
  border: 1px solid #ebeef5;
  background-color: #f5f7fa;
  color: #909d8f;
  height: 32px;
  font-size: 14px;
}

tr:hover {
  background-color: #f6f8fb;
}

input {
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  border: none;
  outline: none;
}

.delete-icon {
  width: 16px;
  vertical-align: middle;
  padding: 5px 0;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  background-color: #f5f5f5;
}


/*定义滚动条轨道 内阴影+圆角*/

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  background-color: #f5f5f5;
}


/*定义滑块 内阴影+圆角*/

::-webkit-scrollbar-thumb {
  border-radius: 3px;
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
  background-color: rgba(144, 147, 153, 0.3);
}
</style>