elementplus 表格

在点击事件中可以直接打印row 或者 column 获取需要的数据

<template>
  <el-table :data="tableData" @cell-click="showUnitInput">
    <el-table-column label="标题1" prop="data1"></el-table-column>
    <el-table-column label="数据2" prop="data2"></el-table-column>
    <el-table-column label="数据3" prop="data3">
      <template #default="{ row, column }">
        <el-input
          v-if="tableRowEditId === row.id && tableColumnEditIndex === column.no"
          v-model="row.data3"
          @keyup.enter="blurValueInput(row, column)"
        />
        <span v-else>{{ row.data3 }}</span>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { ref } from "vue";

const tableData = ref([
  { id: 1, data1: "标题1", data2: "数据1", data3: "数据1" },
  { id: 2, data1: "标题2", data2: "数据2", data3: "数据2" },
  { id: 3, data1: "标题3", data2: "数据3", data3: "数据3" },
]);

const tableRowEditId = ref(null);
const tableColumnEditIndex = ref(null);

const showUnitInput = (row, column) => {
  tableRowEditId.value = row.id;
  tableColumnEditIndex.value = column.no;
};

const blurValueInput = (row, column) => {
  tableRowEditId.value = null;
  tableColumnEditIndex.value = null;
  console.log(row.data3, "blurValueInput");
  // 在此处调接口传数据
};
</script>

表格的所有列表的头和内容居中:

在el-table上添加下面两行即可

:cell-style=“{ textAlign: ‘center’ }”
:header-cell-style=“{ ‘text-align’: ‘center’ }”

组件显示成中文

import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

app.use(ElementPlus,{
    locale: zhCn,
})

完整示例

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

const app = createApp(App)

app.use(ElementPlus,{
    locale: zhCn,
})
app.mount('#app')

时间格式设置不对 00:00 会显示成 00:04 HH:MM 正确的是 HH:mm