<!--只读表格项-->
<template>
  <!--<el-tooltip :disabled="disabled" :content="text" class="tableCellReadOnly" effect="dark" placement="top">-->
  <el-input v-model="text" :value="text"/>
  <!--<div ref="textdiv" class="textDiv">-->
  <!--{{ text }}-->
  <!--</div>-->
  <!--</el-tooltip>-->
</template>

<script>
export default {
  name: 'TableCellRead',
  // filters: {
  //   ellipsis(value) {
  //     if (!value) return ''
  //     // 中文 正则
  //     const cnReg = /([\u4e00-\u9fa5]|[\u3000-\u303F]|[\uFF00-\uFF60])/g
  //     const mat = value.match(cnReg)
  //     let textlen = 0
  //     if (mat) {
  //       textlen = mat.length + (value.length - mat.length) * 0.5
  //     } else {
  //       textlen = value.length * 0.5
  //     }
  //     if (textlen > 14) {
  //       return value.slice(0, 12) + '...'
  //     }
  //     return value
  //   }
  // },
  props: {
    text: {
      type: String,
      default: ''
    }
  },
  computed: {
    disabled() {
      const value = this.text
      if (!value) return true
      if (this.$refs.textdiv) {
        const length = this.$refs.textdiv.clientWidth
        // 中文 正则
        const cnReg = /([\u4e00-\u9fa5]|[\u3000-\u303F]|[\uFF00-\uFF60])/g
        const mat = value.match(cnReg)
        let textlen = 0
        if (mat) {
          textlen = mat.length + (value.length - mat.length) * 0.5
        } else {
          textlen = value.length * 0.5
        }
        if (textlen * 14 > length) {
          return false
        } else {
          return true
        }
      } else {
        return true
      }
    }
  }
}
</script>

<style scoped>
.tableCellReadOnly{
  -webkit-appearance: none;
  background-color: #FFFFFF;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #DCDFE6;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  height: 40px;
  line-height: 40px;
  outline: none;
  padding: 0 15px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow-ellipsis: ellipsis;
  /*-webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);*/
  /*transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);*/
  width: 100%;
}
</style>