WakuwakuP / element-ui-el-table-draggable

Make 'el-table' of 'element UI' sortable.
https://www.npmjs.com/package/element-ui-el-table-draggable
MIT License
111 stars 19 forks source link

Can't use when el-table with fixed attribute. #21

Open HExris opened 4 years ago

HExris commented 4 years ago
<el-table-draggable handle=".handle">
            <el-table
              :data="jobList"
              :header-cell-style="{background:'#ffffff',color:'#092048'}"
              highlight-current-row
              row-key="id"
            >
              <el-table-column prop="postName" label="岗位名称" min-width="120"></el-table-column>
              <el-table-column prop="unitName" label="所属组织" min-width="120"></el-table-column>
              <el-table-column prop="parentPostName" label="上级岗位" min-width="120"></el-table-column>
              <el-table-column prop="parentPostUnitName" label="上级岗位所属组织" min-width="160"></el-table-column>
              <el-table-column prop="majorNumber" label="主岗(人)" min-width="120"></el-table-column>
              <el-table-column prop="partTimeNumber" label="兼岗(人)" min-width="120"></el-table-column>
              <el-table-column label="操作" min-width="200" header-align="center">

                <template>
                  <div class="handle noselect">
                    handle
                  </div>
                  <!-- <div class="operation">
                    <span @click="addOneRow(scope.row)" class="operation-item add">
                      <img class="operation-icon" src="../assets/imgs/add.png" />
                      <span>新增</span>
                    </span>
                    <div class="operation-gap"></div>
                    <span @click="lookupDetail(scope.row)" class="operation-item detail">
                      <img class="operation-icon" src="../assets/imgs/lookup.png" />
                      <span>查看</span>
                    </span>
                    <img src="../assets/imgs/up-down.png" class="sort-icon" />
                  </div> -->
                </template>
              </el-table-column>
            </el-table>
          </el-table-draggable>
<script>
import VueTree from "./OrgTree.vue";
import ElTableDraggable from "element-ui-el-table-draggable";

export default {
  name: "JobManagement",
  components: {
    VueTree,
    ElTableDraggable
  },
  data: function() {
    return {
      expandTree: false,
      jobTree: [
        {
          unitId: 1, //组织ID
          unitName: "深圳市壹家有限公司", //组织名称
          parentUnitId: -1, //上级组织id
          orderId: 1, //组织排序号
          expand: true,
          underUnit: [
            {
              unitId: 2, //组织ID
              unitName: "壹家上海分公司", //组织名称
              parentUnitId: 1, //上级组织idorderId: 2, //组织排序号
              expand: true,
              underUnit: [] //下级组织
            },
            {
              unitId: 3, //组织ID
              unitName: "壹家北京分公司", //组织名称
              parentUnitId: 1, //上级组织id
              orderId: 3, //组织排序号
              expand: true,
              underUnit: [
                {
                  unitId: 4, //组织ID
                  unitName: "用户体验产品线", //组织名称
                  parentUnitId: 1, //上级组织id
                  orderId: 3, //组织排序号
                  expand: true,
                  underUnit: [
                    {
                      unitId: 5, //组织ID
                      unitName: "医疗产品部", //组织名称
                      parentUnitId: 1, //上级组织id
                      orderId: 3, //组织排序号
                      expand: true,
                      underUnit: [] //下级组织
                    },
                    {
                      unitId: 6, //组织ID
                      unitName: "产品开发部", //组织名称
                      parentUnitId: 1, //上级组织id
                      orderId: 3, //组织排序号
                      expand: true,
                      underUnit: [] //下级组织
                    }
                  ] //下级组织
                }
              ]
            }
          ]
        }
      ],
      jobList: [
        {
          postID: 0,
          postName: "开发工程师",
          parentPostID: 1,
          parentPostName: "架构师",
          parentPostUnitName: "应用产品部门",
          orderID: 0,
          unitName: "技术部门",
          unitFullName: "应用产品部门/人事部门",
          majorNumber: 10,
          partTimeNumber: 20,
          virtualUnits: 1
        },
        {
          postID: 1,
          postName: "开发工程师",
          parentPostID: 2,
          parentPostName: "架构师",
          parentPostUnitName: "应用产品部门",
          orderID: 1,
          unitName: "人事部门",
          unitFullName: "应用产品部门/人事部门",
          majorNumber: 10,
          partTimeNumber: 20,
          virtualUnits: 1
        }
      ]
    };
  },
  methods: {
    toggleTree() {
      this.expandTree = !this.expandTree;
    },
    selectOrg(org) {
      let selectedOrg = org;
      console.log(selectedOrg);
    },
    addOneRow(item) {
      console.log(item);
    },
    lookupDetail(item) {
      console.log(item);
    }
  }
};
</script>