el-simple-table v0.0.3

my-project

Project setup

npm i element-ui -S
npm i el-simple-table -S

// main.js

import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import WTable from "el-simple-table";

Vue.use(ElementUI);
Vue.use(WTable);

// index.vue
<template>
  <div style="padding: 30px">
    <w-table
      ref="selectionTable"
      row-key="uid"
      :columns="columns1"
      :data-source="tableData"
      :selections="selections"
      :pagination="false"
    >
      <template v-slot:password="{ row }">
        {{ row.password + "******" }}
      </template>
    </w-table>

    <w-table
      :columns="columns2"
      :data-source="tableData"
      unique-name="uniqueName"
      highlight-row="single"
      :page-size="pageSize"
      :page-num="pageNum"
      :total="total"
      drag-remember
      border
      style="margin-top: 30px"
    />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      columns1: [
        {
          type: "selection",
        },
        {
          prop: "username",
          label: "用户名",
        },
        {
          prop: "baseinfo",
          label: "用户基础信息",
          children: [
            {
              prop: "password",
              label: "密码",
              headerTip: "我是用户登录密码",
            },
            {
              prop: "age",
              label: "年龄",
            },
          ],
        },
      ],
      columns2: [
        {
          type: "selection",
        },
        {
          prop: "username",
          label: "用户名",
          formatter(val) {
            return "用户名: " + val;
          },
        },
        {
          prop: "password",
          label: "密码",
          headerTip: "我是用户登录密码",
        },
        {
          prop: "age",
          label: "年龄",
        },
      ],
      tableData: [
        {
          id: 1,
          uid: 1,
          username: "老王",
          password: "abc123",
          age: "12",
        },
        {
          id: 2,
          uid: 2,
          username: "花花",
          password: "123456",
          age: "18",
        },
        {
          id: 3,
          uid: 3,
          username: "小虎",
          password: "test123",
          age: "16",
        },
      ],
      pageSize: 20,
      pageNum: 1,
      total: 30,
      selections: [2],
    };
  },
  mounted() {
    this.$refs["selectionTable"].setRowSelection();
  },
};
</script>