kd-aiot-frontend/src/views/rulesManagement/releaseRules/components/templateDiv/customTable.vue

<!-- 搜索表单 -->
<template>
  <div style="margin-top: 10px">
    <el-button type="primary" @click="addColumn" v-if="edit">新增列</el-button>
    <el-button type="primary" @click="addRow" v-if="edit">新增行</el-button>

    <table style="margin-top: 10px" :id="id">
      <thead>
        <tr>
          <th
            v-for="(item, index) in columns"
            class="tableTh"
            :style="{ width: item.width + 'px' }"
          >
            <i
              class="el-icon-delete delete"
              style="display: none"
              @click="removeColumn(index)"
              v-if="edit"
            ></i>
            <input
              v-model="item.value"
              type="text"
              class="templateInput"
              :id="item.id"
              :readonly="item.readonly == 2 || !edit"
              @click="inputClick(item, 'columns')"
            />
          </th>
          <th v-if="edit"></th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, rowIndex) in rows">
          <td v-for="item in row.cells"
            ><input
              v-model="item.value"
              type="text"
              class="templateInput"
              :id="item.id"
              :readonly="item.readonly == 2 || !edit"
              @click="inputClick(item)"
              @input="calculation"
          /></td>
          <td v-if="edit">
            <i
              class="sort-handle el-icon-delete delete"
              style="color: #f56c6c"
              @click="removeRow(rowIndex)"
            ></i
          ></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
  import dictMixins from '@/mixins/dictMixins';
  import { generateRandomString } from '@/utils/util';

  export default {
    props: {},
    mixins: [dictMixins],
    props: {
      id: '',
      edit: {
        default: true,
        type: Boolean
      }
    },
    data() {
      return {
        form: null,
        valueObj: {},
        domId: '',
        rightClickShow: false,
        columns: [],
        rows: [],
        equation: {}
      };
    },
    created() {},
    methods: {
      // 方法：添加新列
      addColumn() {
        this.columns.push({
          value: `列${this.columns.length + 1}`,
          id: generateRandomString(5),
          readonly: 1
        });
        this.rows.forEach((row) => {
          row.cells.push({
            value: '',
            readonly: 1,
            id: generateRandomString(5)
          });
        });
      },

      // 方法：删除指定列
      removeColumn(index) {
        this.columns.splice(index, 1);
        this.rows.forEach((row) => {
          row.cells.splice(index, 1);
        });
      },

      // 方法：添加新行
      addRow() {
        const newRow = {
          cells: Array(this.columns.length)
            .fill(null)
            .map(() => ({
              readonly: 1,
              value: '',
              id: generateRandomString(5)
            }))
        };
        this.rows.push(newRow);
      },
      // 方法：删除指定行
      removeRow(index) {
        this.rows.splice(index, 1);
      },

      objInit() {
        if (Object.keys(this.valueObj).length) {
          for (let key in this.valueObj) {
            this.$nextTick(() => {
              let dom = document.getElementById(key);
              dom.value = this.valueObj[key];
            });
          }
        }
      },
      calculation() {
        this.$emit('calculation');

      },
      equationValue({ domId, value }) {
        this.rows.forEach((item, index) => {
          let cellIndex = item.cells.findIndex((cell) => cell.id == domId);
          if (cellIndex != '-1') {
            this.$set(this.rows[index].cells[cellIndex], 'value', value);
          }
        });
      },
      getValue() {
        return {
          form: null,
          equation: this.equation,
          valueObj: {
            columns: this.columns,
            rows: this.rows
          }
        };
      },
      init({ form, valueObj, equation }) {
        this.form = form;
        this.columns = valueObj.columns;
        this.rows = valueObj.rows;
        this.equation = equation || {};
      },
      editInputChange(domObj) {
        if (domObj.equation) {
          this.equation[this.domId] = domObj.equation;
        }
        let columnsIndex = this.columns.findIndex(
          (item) => item.id == this.domId
        );
        if (columnsIndex >= 0) {
          this.$set(this.columns, columnsIndex, domObj);
          return;
        }
        this.rows.forEach((item, index) => {
          let rowsIndex = item.cells.findIndex(
            (cells) => cells.id == this.domId
          );

          if (rowsIndex >= 0) {
            this.$set(this.rows[index].cells, rowsIndex, domObj);
          }
        });
      },

      inputClick(item, type) {
        if (!this.edit) {
          return;
        }
        let dom = document.getElementById(item.id);

        this.domId = item.id;
        this.$emit('editShow', {
          templateDivRef: 'customTextRef' + this.id,
          domObj: {
            width: dom.parentElement.offsetWidth,
            isNoWidth: type == 'columns' ? false : true,
            id: item.id,
            readonly: item.readonly,
            value: item.value,
            equation: this.equation[item.id]
          }
        });
      }
    }
  };
</script>
<style lang="scss" scoped>
  :deep(.templateInput) {
    width: 100%;
    height: 100%;
    border: none;

    text-align: center;
    background-color: #fff;
  }
  table {
    width: 100%;
    border-collapse: collapse;
  }
  th,
  td {
    border: 1px solid #ddd;
    padding: 0;
    text-align: center;
    height: 30px;
  }
  th {
    background-color: #f2f2f2;
  }
  tr:nth-child(even) {
    background-color: #f9f9f9;
  }
  input:focus {
    border-color: #66afe9; /* 改变边框颜色 */
    outline: none; /* 移除默认的轮廓线 */
  }
  .tableTh:hover {
    position: relative;
    .delete {
      display: block !important;
      position: absolute;
      right: 0;
      top: 0;
      color: #f56c6c;
    }
  }
</style>