elementui多选tree table树表格组件化使用

Dear 丶 2023-06-13 06:22 69阅读 0赞

使用elementui 中table实现多选树表格，可多选，可全选，  
本文将原来的进行了更改，适配自己的需求，查看原demo请查看  
[https://blog.csdn.net/qq\_32442967/article/details/103068920][https_blog.csdn.net_qq_32442967_article_details_103068920]

直接下载地址：[https://download.csdn.net/download/qq\_32442967/12015371][https_download.csdn.net_download_qq_32442967_12015371]

注：element-ui@2.5.4版本完美支持，在新版本elementUI中，默认不全展开时，会出现问题，在默认全部展开时不影响效果。

样式：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDQyOTY3_size_16_color_FFFFFF_t_70]

--------------------

courseProgress.vue

<template>
      <div>
        <tree-table ref="tree1" :data="coursewareList" :columns="columns" :primary_fld="'id'" :expand-all="expandAll" :parent_fld="'parent_id'" :select_fld="'false'" @replayStudy="replayStudy">
          <el-table-column label="课件进度" min-width="150" align="center">
            <template slot-scope="scope">
              <span>{
       {scope.row.progress}}</span>
            </template>
          </el-table-column>
        </tree-table>
      </div>
    </template>
    
    <script> import treeTable from './components/treeTable' export default { name: 'courseProgress', components: { treeTable }, data () { return { expandAll: true, columns: [{ value: 'itemName', text: '章节', minWidth: '300'}], coursewareList: [{ id: '1', parent_id: '', itemName: '第一章', progress: '86%', comment: '', type: 'chapter' }, { id: '2', parent_id: '', itemName: '第二章', progress: '86%', type: 'chapter' }, { id: '3', parent_id: '1', itemName: '第1节', progress: '86%', type: 'node' }, { id: '4', parent_id: '2', itemName: '第2节', progress: '86%', type: 'node' }, { id: '5', parent_id: '1', itemName: '第2节', progress: '100%', type: 'node' }, { id: '9', parent_id: '3', itemName: '第1考点', progress: '100%', type: 'point' }, { id: '10', parent_id: '3', itemName: '第2考点', progress: '100%', type: 'point' }, { id: '11', parent_id: '5', itemName: '第一考点', progress: '100%', type: 'point' }, { id: '12', parent_id: '4', itemName: '第一考点', progress: '100%', type: 'point' }, { id: '9', parent_id: '', itemName: '综合学习', progress: '100%', type: 'point' }] } }, methods: { } } </script>
    
    <style scoped> </style>

treeTable.vue

<template>
      <div>
        <el-table :data="formatData" :row-style="showRow" v-bind="$attrs" v-on="$listeners">,
          <template v-if="select_fld">
            <el-table-column width="50" align="center">,
              <template slot="header" slot-scope="scope">
                <el-checkbox v-model="chooseall" @change="setchildtobeselect(formatData,$event)"/>
              </template>
              <template slot-scope="scope">
                <el-checkbox v-model="scope.row[select_fld]" @change="toselect(scope.row)"></el-checkbox>
              </template>
            </el-table-column>
          </template>
    
          <el-table-column v-if="columns.length===0">
            <template slot-scope="scope">
              <span v-for="space in scope.row._level" :key="space" class="ms-tree-space"></span>
              <span v-if="iconShow(0,scope)" class="tree-ctrl" @click="toggleExpanded(scope.$index)">
                <i v-if="!scope.row._expanded" class="el-icon-plus"></i>
                <i v-else class="el-icon-minus"></i></span>
              {
       { scope.$index }}
            </template>
          </el-table-column>
          
          <el-table-column v-for="(column, index) in columns" v-else :key="column.value" :label="column.text" :width="column.width" :min-width="column.minWidth">
            <template slot-scope="scope">
              
              <span v-for="space in scope.row._level" v-if="index === 0" :key="space" class="ms-tree-space"></span>
              <el-button size="mini" style="color: #17CAAA" v-if="scope.row.type === 'point'">替学</el-button>
              <span v-if="iconShow(index,scope)" class="tree-ctrl" @click="toggleExpanded(scope.$index)">
                <i v-if="!scope.row._expanded" class="el-icon-caret-right"></i>
                <i v-else class="el-icon-caret-bottom"></i></span>
              {
       { scope.row[column.value] }}
            </template>
          </el-table-column>
          <slot/>
        </el-table>
      </div>
    </template>
    
    <script> export default { name: 'treeTable', data () { return { // chooseson: true, // 全选 key: true, // 单个点击直到全部选中 // 当前全选状态 chooseall: false } }, props: { /* eslint-disable */ data: { type: [Array, Object], required: true }, columns: { type: Array, default: () => [] }, evalFunc: Function, evalArgs: Array, expandAll: { type: Boolean, default: false }, select_fld: { type: String, //default: "id" default: "" }, //----------------------------------------- // 如果数据源是靠字父级字段来表示树的话，primary_fld和parent_fld必须同时传入，并指定root_value primary_fld: { type: String, default: "id", required: true }, parent_fld: { type: String, //default: "parent_id" default: "" }, // 根级节点值 root_value: { type: [String, Number], //default: "parent_id" default: "" }, // 可选，子节点数的字段，如果含有此字段，将会加快加载速度 child_count_fld: { type: String, //default: "childCount" default: "" } }, computed: { // 格式化数据源 formatData: function () { let result = []; let tmp; let func = this.evalFunc; if (this.is_source_table) { // 数据源是一个表格数组,依靠关键字段和父级id组成关系 tmp = 0; func = this.tableToTree; } else if (Array.isArray(this.data)) { tmp = this.data; } else { tmp = [this.data]; } const args = this.evalArgs ? [result, tmp, this.expandAll].concat(this.evalArgs) : [result, tmp, this.expandAll]; //return func.apply(null, args); func.apply(null, args); return result; }, // 判断数据源是否使用父级字段来表示的二维的表格树 is_source_table: function () { return this.primary_fld && this.parent_fld; } }, methods: { //代替原来的 treeToArray函数 tableToTree: function (tResult, tStartRecno, expandAll, parent, level, item) { const that = this; let parent_value = that.root_value; let _level = 1; let record = null; let child = null; const marLTemp = [] let tmp = [] if (parent) { parent_value = parent[that.primary_fld]; _level = level; } //Array.from(data).forEach(function(record) { for (let i = tStartRecno, count = that.data.length; i < count; i++) { record = that.data[i]; if (record[that.parent_fld] !== parent_value) { continue; } if (record._expanded === undefined) { this.$set(record, '_expanded', expandAll) } this.$set(record, '_level', _level) // 如果有父元素 if (parent) { this.$set(record, 'parent', parent) // 如果父元素有偏移量，需要计算在this的偏移量中 // 偏移量还与前面同级元素有关，需要加上前面所有元素的长度和 if (!marLTemp[_level]) { marLTemp[_level] = 0 } this.$set(record, '_marginLeft', marLTemp[_level] + parent._marginLeft) this.$set(record, '_width', record[item] / parent[item] * parent._width) // 在本次计算过偏移量后加上自己长度，以供下一个元素使用 marLTemp[_level] += record._width } else { // 如果为根 // 初始化偏移量存储map marLTemp[record[that.primary_fld]] = [] // map中是一个数组，存储的是每级的长度和 // 初始情况下为0 marLTemp[record[that.primary_fld]][_level] = 0 this.$set(record, '_marginLeft', 0) this.$set(record, '_width', 1) } tmp.push(record) tResult.push(record); // 表含有表示子节点数量的字段 let is_seek_child = 1; if (that.child_count_fld) { is_seek_child = record[that.child_count_fld]; } if (is_seek_child) { const next_recno = i + 1; const next_level = _level + 1; child = that.tableToTree(tResult, next_recno, expandAll, record, next_level, item); if (child.length > 0) { //tmp = tmp.concat(child); if (!record.child) { this.$set(record, 'child', child); } } } } //}) return tmp }, showRow: function (row) { const show = row.row.parent ? row.row.parent._expanded && row.row.parent._show : true; row.row._show = show; return show ? "animation:treeTableShow 1s;-webkit-animation:treeTableShow 1s;" : "display:none;"; }, // 切换下级是否展开 toggleExpanded: function (trIndex) { const record = this.formatData[trIndex]; record._expanded = !record._expanded; }, // 图标显示 iconShow(index, tScope) { const record = tScope.row; //console.info(tScope.$index); return index === 0 && record.child && record.child.length > 0; }, //功能函数:选中部分子集 setchildtobeselect(arr, key) { const that = this; arr.forEach((v, i) => { //v.checks = key; v[that.select_fld] = key; // v._expanded = key;//选中后展开子项 if (v.child) { this.setchildtobeselect(v.child, v[that.select_fld]); } }); }, //是否所有的都被选中 isallchecked(arr) { const that = this; arr.forEach((v, i) => { if (!v[that.select_fld]) { // 根据评论中建议进行修改-深度渲染。在展开关闭之后，点击 checkbox 会不渲染 // this.key = false; this.$set(this, "key", false); } if (v.child) { this.isallchecked(v.child); } }); }, // 节点下的子节点，全部都没有被选中或子节点个数为0时返回true，否则返回false is_all_false(tNode) { const that = this; let result = true; if (!Array.isArray(tNode.child)) { return result; } tNode.child.forEach((v, index) => { // 只要有一个兄弟是true,终止递归 if (v[that.select_fld]) { result = false; return result; //终止此次循环，减少循环次数 } }); return result; }, // 如果节点为被选状态，通过检查子节点是否有被选中，否则修正它 refresh_node_select(tNode) { const that = this; let node = tNode; while (true) { // 选中? if (node[that.select_fld]) { if (that.is_all_false(node)) { node[that.select_fld] = false; } else { break; } } if (node["parent"]) { node = node["parent"]; } else { break; } } }, //某个复选框被点击时 toselect(row) { const that = this; let node = null; // row._expanded = row.checks;//选中后是否展开 //1、若有子集先让子选中 if (row.child) { this.setchildtobeselect(row.child, row[that.select_fld]); } //2、然后判断是否全选中 this.key = true; //重置为true，防止上次已经是false的状态 |半选状态is-indeterminate this.isallchecked(this.formatData); //3、设置多选框的状态 if (!row[that.select_fld]) { //this.setparentfalse(this.formatData, row[that.primary_fld], row._level); //设置父级选中的状态为false if (row.parent) { that.refresh_node_select(row.parent); } //设置全选框的状态 that.chooseall = false; //document.getElementById("chooseall").checked = false; } else { node = row; while (node["parent"]) { node = node["parent"]; if (!node[that.select_fld]) { node[that.select_fld] = true; } } //this.setparenttrue(this.formatData, row[that.primary_fld], row._level); //设置父级选中的状态为true } if (this.key) { that.chooseall = true; //document.getElementById("chooseall").checked = true; //设置全选框的状态 } }, replayStudy (row) { this.$emit('replayStudy', row) } }, mounted() { this.$nextTick(() => { var that = this; //const all = document.getElementById("chooseall"); }); }, } </script>
    
    <style scoped> @keyframes treeTableShow { from { opacity: 0; } to { opacity: 1; } } @-webkit-keyframes treeTableShow { from { opacity: 0; } to { opacity: 1; } } .ms-tree-space { position: relative; top: 1px; display: inline-block; font-style: normal; font-weight: 400; line-height: 1; width: 18px; height: 14px; } .ms-tree-space::before { content: ""; } .processContainer { width: 100%; height: 100%; } table td { line-height: 26px; } .tree-ctrl { position: relative; cursor: pointer; /*color: #2196f3;*/ margin-left: -18px; } </style>

[https_blog.csdn.net_qq_32442967_article_details_103068920]: https://blog.csdn.net/qq_32442967/article/details/103068920
[https_download.csdn.net_download_qq_32442967_12015371]: https://download.csdn.net/download/qq_32442967/12015371
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDQyOTY3_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191114181227104.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDQyOTY3,size_16,color_FFFFFF,t_70