Jlk-pivottable NPM

Element-plus 表格行列转换

基于 Element-plus 表格的行列转换的实现

安装

npm i jlk-pivottable

/* main.js */
import { createApp } from "vue";
import App from "./App.vue";
import PivotTable from "jlk-pivottable";
const app = createApp(App);
app.use(PivotTable);

API

表格的属性

属性名	类型	默认	说明
`tableType`	`Boolean`	`false`	true：竖向，false：横向
`tableData`	`Array`	`[]`	绑定 table 的 data
`columns`	`Array`	`[]`	表格的列（动态列）
`tableAttrs`	`Object`	`{}`	el-table 的属性跟 element el-table 的属性同步
`tableEvent`	`Object`	`{}`	el-table 的方法跟 element el-table 的事件同步
`firstColumnAttrs`	`Object`	`{}`	第一列的属性（转换列的表头）
`firstColumnEvent`	`Object`	`{}`	第一列的方法（转换列的表头）
`isLink`	`Boolean`	`false`	第一列是否开启 link 模式
`linkAttrs`	`Object`	`{}`	el-link 的属性
`linkEvent`	`Object`	`{}`	el-link 的方法

事件

Prop	Description	形参
`onSortChange`	表格的排序	row
`cellClick`	每一个单元格的点击事件	key,row
`setTableData`	更新表格数据方法	idName, idValue, key, val

单列的属性

属性名	类型	默认	说明
`attrs`	`Boolean`	`false`	某一列 el-table-column 的属性
`event`	`Array`	`[]`	某一列 el-table-column 的方法
`isLink`	`Array`	`[]`	某一列 el-table-column 是否开启 link 模式

插槽

插槽名	参数
`default`	row, value, key, rowIndex, columIndex, eventRow

使用案例

<PivotTable
  ref="pivotTable"
  :tableAttrs="{
        cellStyle
      }"
  :columns=" columns"
  :tableData="tableData"
  :firstColumnAttrs="firstColumnAttrs"
  :tableType="tableType"
  :isLink=" false "
  :linkAttrs="{
        style: 'color: #409eff'
      }"
  @cellClick="cellClick"
  @onSortChange="onSortChange"
></PivotTable>

let firstColumnAttrs = {
  prop: "organization",
  label: "组织区域",
  firstMinWidth: "130px"
};

const tableData = ref([
  {
    houseName: "9200",
    temperatureDifference: "2°C",
    extremeHumidity: "50%",
    CO2: "29ppm",
    farm: "test-1",
    organization: "组织区域1",
    houseCode: 4564554
  },
  {
    houseName: "9100",
    temperatureDifference: "3°C",
    extremeHumidity: "50%",
    CO2: "29ppm",
    farm: "test-1",
    organization: "组织区域1"
  },
  {
    houseName: "9010",
    temperatureDifference: "3°C",
    extremeHumidity: "50%",
    CO2: "30ppm",
    farm: "test-1",
    organization: "组织区域1"
  },
  {
    temperatureDifference: "4°C",
    houseName: "9100plus",
    extremeHumidity: "50%",
    CO2: "34ppm",
    farm: "test-1",
    organization: "组织区域1"
  }
]);

const columns = ref([
  {
    key: "farm",
    label: "鸡场",
    name: "鸡场",
    isLink: true,
    attrs: {
      fixed: true,

      minWidth: "100px"
    }
  },
  {
    key: "houseName",
    label: "鸡舍",
    name: "鸡舍",
    isLink: true,
    attrs: {
      fixed: true,

      minWidth: "100px"
    }
  },
  {
    key: "temperatureDifference",
    name: "温度极差",
    label: "温度极差",
    attrs: {
      sortable: "custom",
      minWidth: "500px"
    }
  },
  {
    key: "extremeHumidity",
    name: "湿度极差",
    label: "湿度极差",

    attrs: {
      sortable: "custom",
      minWidth: "500px"
    }
  },
  {
    key: "CO2",
    name: "CO₂极差",
    label: "CO₂极差",
    minWidth: "500px",
    attrs: {
      sortable: "custom",
      minWidth: "500px"
    }
  }
]);
const tableType = ref(false);
// 行列转换

function tableRowsToColumns() {
  tableType.value = !tableType.value;
}

function onSortChange(row) {
  console.log(1111, row);
}

let pivotTable = ref(null);

setTimeout(() => {
  pivotTable.value.setTableData("id", "3", "temperatureDifference", "8°C");
}, 2000);

function cellClick(key, row) {
  console.log(1111, key, row);
  if (key == "houseName") {
  } else if (key == "farm") {
  }
}

插槽使用案例

<PivotTable
  ref="pivotTable"
  :tableAttrs="{
          cellStyle
        }"
  :columns="columns"
  :tableData="tableData"
  :firstColumnAttrs="firstColumnAttrs"
  :tableType="tableType"
  :isLink="false"
  @cellClick="cellClick"
  @onSortChange="onSortChange"
>
  <template #default="{ row, value, key, rowIndex, columIndex, eventRow }">
    <div @click="cellClick(key, eventRow)">
      <span> {{ value }}</span>
      <span v-if="columIndex >= 0"> {{ columns[columIndex].unit }}</span>
    </div>
  </template>
</PivotTable>

let firstColumnAttrs = {
  prop: "organization",
  label: "组织区域",
  firstMinWidth: "130px"
};

const tableData = ref([
  {
    houseName: "9200",
    temperatureDifference: 2,
    extremeHumidity: 50,
    CO2: 29,
    farm: "test-1",
    organization: "组织区域1",
    houseCode: 4564554,
    id: "1"
  },
  {
    houseName: "9100",
    temperatureDifference: 3,
    extremeHumidity: 50,
    CO2: 30,
    farm: "test-1",
    organization: "组织区域1",
    id: "2"
  },
  {
    houseName: "9010",
    temperatureDifference: 3,
    extremeHumidity: 60,
    CO2: 35,
    farm: "test-1",
    organization: "组织区域1",
    id: "3"
  },
  {
    temperatureDifference: 4,
    houseName: "9100plus",
    extremeHumidity: 70,
    CO2: 34,
    farm: "test-1",
    organization: "组织区域1",
    id: "4"
  }
]);

const columns = ref([
  {
    key: "farm",
    label: "鸡场",
    name: "鸡场",
    isLink: true,
    attrs: {
      fixed: true,
      minWidth: "100px"
    }
  },
  {
    key: "houseName",
    label: "鸡舍",
    name: "鸡舍",
    isLink: true,
    attrs: {
      fixed: true,

      minWidth: "100px"
    }
  },
  {
    key: "temperatureDifference",
    name: "温度极差",
    label: "温度极差",
    unit: "℃",
    attrs: {
      sortable: "custom",
      minWidth: "500px"
    }
  },
  {
    key: "extremeHumidity",
    name: "湿度极差",
    label: "湿度极差",
    unit: "%",
    attrs: {
      sortable: "custom",
      minWidth: "500px"
    }
  },
  {
    key: "CO2",
    name: "CO₂极差",
    label: "CO₂极差",
    minWidth: "500px",
    unit: "ppm",
    attrs: {
      sortable: "custom",
      minWidth: "500px"
    }
  }
]);
const tableType = ref(false);
// 行列转换

function tableRowsToColumns() {
  tableType.value = !tableType.value;
}

function onSortChange(row) {
  console.log(1111, row);
}

function cellClick(key, row) {
  console.log(1111, key, row);
  if (key == "houseName") {
  } else if (key == "farm") {
  }
}
let pivotTable = ref(null);
const average = ref(3);

setTimeout(() => {
  average.value = 2;
}, 5000);
setTimeout(() => {
  pivotTable.value.setTableData("id", "3", "temperatureDifference", 8);
}, 2000);

function cellStyle({ row, column, rowIndex, columnIndex }) {
  //根据业务定制
  let classStr = {};

  if (!tableType.value) {
    if (columnIndex > 0) {
      if (columns.value[columnIndex - 1].name.includes("温度")) {
        if (Number(row[columns.value[columnIndex - 1].key]) > average.value) {
          classStr = { backgroundColor: "#f89898", color: "white" };
        } else if (Number(row[columns.value[columnIndex - 1].key]) < average.value) {
          classStr = { backgroundColor: "#79bbff", color: "white" };
        }
      }
    }
  } else {
    if (columns.value[rowIndex].name.includes("温度")) {
      if (Number(row[`${columns.value[rowIndex].key}${columnIndex - 1}`]) > average.value) {
        classStr = { backgroundColor: "#f89898", color: "white" };
      } else if (Number(row[`${columns.value[rowIndex].key}${columnIndex - 1}`]) < average.value) {
        classStr = { backgroundColor: "#79bbff", color: "white" };
      }
    }
  }

  return classStr;
}

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago