elementui动态表格

关于elementui的动态表格：

举例：在工作中有时候我们会用到element的table
但是表格列配置再每一个页面需要配置一次及其麻烦 所以我们可以基于饿了么的table来从数据库获取数据来动态的 添加字段

---

学习内容：

提示：这里可以添加要学的内容
例如：
1、 搭建 Java 开发环境
2、 掌握 Java 基本语法
3、 掌握条件语句
4、 掌握循环语句

---

下面展示一些 关键代码片段代码片。
这是数据库数据

// 
loadPower(val) {
      var _that = this;
      if (val) {
        //var pageList =_that.$store.state.user.viewconfData;

        var pageList = JSON.parse(localStorage.getItem("table_column"));

        if (pageList.length == 0) return false;
        var currentOptions = Enumerable.from(pageList)
          .where(function (x) {
            return x.cn_s_power_code == val;
          })
          .toArray(); //.first().col;
        //.orderBy(function(x){x.cn_n_order})
        // .toArray();
        if (!currentOptions || currentOptions.length == 0) {
          _that.$message.warning("未找到配置<" + val + ">的列");
          return;
        }
        _that.cols = currentOptions.map(function (n) {
          var sort = false;
          var sss=n.cn_s_column_name
          if (n.cn_b_is_sort) {
            sort = true;
            // if (!n.CN_B_CLIENT_SORT) {
            //   sort = "custom";
            // }
          }
          var tableName = "";
          if (n.cn_s_table) {
            tableName = n.cn_s_table;
          }
          var isbool=false
          if(n.cn_s_input_type=="bool"){
            isbool=true
          }
          var formatFun = null;
          if (n.cn_s_method_name) {
            formatFun = function (row, column, cellValue) {
              return eval(n.cn_s_method_name);
            };
          }
          return {
            f: n.cn_s_column_code,
            n: n.cn_s_column_name,
            w: n.cn_n_width <= 0 ? null : n.cn_n_width,
            align: n.cn_s_align,
            href: n.cn_s_link,
            format: formatFun,
            sortable: sort,
            tableName: tableName,
            isbool:isbool
          };
        });
      }

// ui装填数据
<el-table size="mini" border highlight-current-row :data="datas" :height="height || tableHeight"
      @row-click="clickRow" @row-dblclick="dbClickRow" :ref="ref" @selection-change="changeSelect" :fit="true"
      @select="currentSelect" @select-all="selectall" v-loading="showLoading" :row-class-name="rowstyle"
      @sort-change="sortChange" @header-contextmenu="headerRightClick" @row-contextmenu="rowRightClick"
      @contextmenu.prevent.native="rightClickone">
      <el-table-column type="selection" width="40" >
      </el-table-column>
      <el-table-column type="index" width="46" align="center" label="行号" v-if="rowno" v-bind:key="Math.random()">
      </el-table-column>
      <el-table-column v-for="n in cols" :key="n.id" :property="n.f" :label="n.n" :width="n.w"
        :align="n.align || 'center'" :formatter="n.format" :sortable="n.sortable" :column-key="n.tableName">
        <template slot-scope="scope" v-if="!n.hidden">
          <div>
            <div v-if="n.isbool" :class="cellClassName(scope.row[n.f])" style="width: 100%; height: 100%">
              {{ scope.row[n.f]=="true"?"是":"否" }}
            </div>
            <div v-else-if="n.f == 'cn_s_state'" :class="cellClassName(scope.row[n.f])" style="width: 100%; height: 100%">
              {{ scope.row[n.f]}}
            </div>
            <div v-else>
              <a v-on:click="href(n.href,[scope.row],[scope.row[n.f]])" v-show="n.href != undefined" target="_blank"
                class="buttonText">
                <p>{{ scope.row[n.f] }}</p>
              </a>
              <div v-if="n.format">
                {{ n.format(scope.row) }}
              </div>
              <div v-else-if="n.href == undefined" v-html="format(n.f, scope.row, scope.row[n.f])">
                @*{{ format(n.f, scope.row, scope.row[n.f])  }}*@
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>