el-table-column-mochali/src/components/HelloWorld.vue

<template>
  <div class="table-container" align="center">
    <!-- 新增标题 -->
    <h2 class="table-title">1.J1 摩擦力数据表</h2>
    <!-- el-table 组件 -->
    <el-table
      :data="paginatedData"
      empty-text="暂无数据"
      stripe
      highlight-current-row
      style="width: 100%%"
    >
      <!-- el-table-column 组件 -->
      <el-table-column
        prop="name"
        label="摩檫力名称"
        width="300"
        align="center"
      ></el-table-column>

      <el-table-column
        prop="date"
        label="日期"
        width="300"
        align="center"
      ></el-table-column>

      <el-table-column
        prop="mochali"
        label="摩檫力值"
        width="300"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="his"
        label="历史数据"
        width="300"
        align="center"
      >
        <template #default="{row}">
          <el-button type="primary" size="small" @click="handleConfirmClick(row)">
            {{ row.his }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop="btn"
        label="确认"
        align="center"
      >
        <template #default="{row}">
          <el-button type="primary" size="small" @click="handleConfirmClick(row)">
            {{ row.btn }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
      ></el-pagination>
    </div>
  </div>

  <div class="table-container" align="center">
    <!-- ... existing table and other elements ... -->
    
    <!-- 新增对话框 -->
    <el-dialog
      title="摩擦力配置"
      v-model="dialogVisible"
      width="30%"
    >
      <div style="display: grid; grid-template-columns: 1fr 1fr; row-gap: 15px; align-items: center;">
        <span style="text-align: center;">定反位置:</span>
        <el-select v-model="selectedPosition" placeholder="请选择">
          <el-option
            v-for="item in positionOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        
        <span style="text-align: center;">发生日期:</span>
        <el-date-picker
          v-model="currentRow.date"
          type="datetime"
          placeholder="选择日期时间"
          value-format="yyyy-MM-dd HH:mm:ss"
        />
        
        <span style="text-align: center;">摩擦力值:</span>
         <el-input 
          v-model="currentRow.mochali" 
          placeholder="请输入摩擦力值"
          style="width: 100%"
        >
          <template #append>N</template>
        </el-input>

        <span style="text-align: center;">起始值:</span>
        <div style="display: flex; gap: 10px;">
          <el-input 
            v-model="startValue" 
            placeholder="起始值"
            style="flex: 1"
          >
            <template #append>N</template>
          </el-input>
          <el-button 
            type="primary" 
            @click="calculateFriction"
          >
            计算
          </el-button>
        </div>

        <span style="text-align: center;">终点值:</span>
        <el-input 
          v-model="endValue" 
          placeholder="终点值"
          style="width: 100%"
        >
          <template #append>N</template>
        </el-input>

      </div>
      <template #footer>  <!-- Changed from slot="footer" to template #footer -->
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = true">删除</el-button>
        <el-button type="primary" @click="dialogVisible = true">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      dialogVisible: false,  // 新增对话框显示状态
      currentRow: null,      // 新增当前行数据
      positionOptions: [  // 新增下拉选项
        { label: '定扳反', value: '定扳反' },
        { label: '反扳定', value: '反扳定' }
      ],
      selectedPosition: '',  // 新增选中值
      startValue: '',
      endValue: '',
      // 表格数据
      tableData: [
        {
          name: "原摩擦力",
          date: "2025-05-29 12:30:00",
          btn: "确认",
          mochali: "5100",
          his: "历史数据",
        },
        {
          name: "摩擦力1",
          date: "2025-05-30 12:30:00",
          btn: "确认",
          mochali: "6100",
          his: "历史数据",
        },
        {
          name: "摩擦力2",
          date: "2025-05-31 12:30:00",
          btn: "确认",
          mochali: "6200",
          his: "历史数据",
        },
        {
          name: "摩擦力3",
          date: "2025-06-01 12:30:00",
          btn: "确认",
          mochali: "6500",
          his: "历史数据",
        },
      ],
    };
  },
  computed: {
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.tableData.slice(start, end);
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    handleConfirmClick(row) {
      this.$message.success(`点击确认: ${row.btn}, 日期: ${row.date}, 值: ${row.mochali}`);
      // 这里可以添加更多业务逻辑
      this.currentRow = row;  // 保存当前行数据
      this.dialogVisible = true;  // 显示对话框
    },
    calculateFriction() {
      if (this.startValue && this.endValue) {
        const start = parseFloat(this.startValue);
        const end = parseFloat(this.endValue);
        this.currentRow.mochali = Math.abs(end - start).toString();
      } else {
        this.$message.warning('请输入起始值和终点值');
      }
    }
  }
};
</script>

<style scoped>
.table-container {
  padding: 20px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}

/* 优化表格样式 */
.el-table {
  border-radius: 4px;
  border: 1px solid #ebeef5;
}

.el-table__body,
.el-table__header {
  border-collapse: collapse;
}

.el-table th,
.el-table td {
  border-right: 1px solid #ebeef5;
  border-bottom: 1px solid #ebeef5;
}

.el-table th:first-child,
.el-table td:first-child {
  border-left: 1px solid #ebeef5;
}

.el-table th, .el-table td {
  text-align: center;
  /* 统一字体大小和行高 */
  font-size: 16px;
  line-height: 1.5;
  padding: 12px 0;
}

.el-table th {
  background-color: #f5f7fa;
  color: #000000;
  font-weight: bold;
}

::v-deep .el-table__header-wrapper .el-table__header th .cell {
  font-weight: bold;
  font-size: 16px;
  color: #000000;
}

.el-table--striped .el-table__body tr.el-table__row--striped td {
  background-color: #fafafa;
}

.el-table__body tr:hover > td {
  background-color: #f0f7ff !important;
}
</style>