使用elemenui框架遇到的一些问题

目录

1、由于动态修改表头导致出现闪动的情况

2、设置table自动加载序号 

3、设置表头换行效果

4、表格自定义排序

5、el-cascader设置懒加载

6、使用el-table设置多选并实现单选以及根据数据默认选中

---

1、由于动态修改表头导致出现闪动的情况

原因：每次动态添修改表头时，都会重新计算高度和宽度导致

解决：

在公共的table组件中加入以下代码

template

<el-table
      :header-cell-style="hcs"
      :cell-style="cs"
      class="mytable"
      size="small"
      border
      max-height="270"
      :data="processData"
      style="width: 100%"
      ref="table"
    >
      <el-table-column
        :width="
          item.text === '序号'
            ? '80'
            : item.text === '当前值'
            ? '100'
            : item.text === '指标状态'
            ? '100'
            : item.text === '部门名称'
            ? '120'
            : item.text === '指标目标值'
            ? '120'
            : ''
        "
        v-for="item in hederList"
        :key="item.id + Math.random() + new Date().valueOf()"
        :label="item.text"
      >
        <template slot-scope="scope">
          {{ processData[scope.$index][item.key] }}
        </template>
      </el-table-column>
      <!-- <el-table-column label="操作"> </el-table-column> -->
    </el-table>

script

props: {
   processData: {
   type: Array,
   default() {
      return [];
   },
},
hederList: {
   type: Array,
   default() {
   return [];
   },
},

//关键--解决表格数据修改导致表头闪动问题
beforeUpdate() {
    this.$nextTick(() => {
      //在数据加载完，重新渲染表格
      this.$refs["table"].doLayout();
    });
 },

参考地址：使用element中el-table动态增减表头列的时候出现抖动闪动的问题_my466879168的博客-CSDN博客

2、设置table自动加载序号 

<template>
  <el-table
    :data="tableData"
    style="width: 100%; margin-bottom: 20px"
    row-key="id"
    border
    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
  >
//关键
   <el-table-column label="序号"
      type="index">
    </el-table-column>
    <el-table-column prop="date" label="日期" sortable width="180">
    </el-table-column>
    <el-table-column prop="name" label="姓名" sortable width="180">
    </el-table-column>
    <el-table-column prop="address" label="地址"> </el-table-column>
  </el-table>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          id: 2,
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          id: 3,
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
          children: [
            {
              id: 31,
              date: "2016-05-01",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1519 弄",
              children: [
                {
                  id: 35,
                  date: "2016-05-01",
                  name: "王小虎",
                  address: "上海市普陀区金沙江路 1519 弄",
                  children: [
                    {
                      id: 37,
                      date: "2016-05-01",
                      name: "王小虎",
                      address: "上海市普陀区金沙江路 1519 弄",
                    },
                    {
                      id: 38,
                      date: "2016-05-01",
                      name: "王小虎",
                      address: "上海市普陀区金沙江路 1519 弄",
                    },
                  ],
                },
                {
                  id: 36,
                  date: "2016-05-01",
                  name: "王小虎",
                  address: "上海市普陀区金沙江路 1519 弄",
                },
              ],
            },
            {
     

3、设置表头换行效果

参考：elementUI el-table 表格头数据换行 - 董七 - 博客园

css:

/*实现表格头数据换行*/
.el-table .cell {
    /*text-align: center;*/
    white-space: pre-line;/*保留换行符*/
}

 使用

<el-table-column prop="name" :label="'数据\n单位'" align="center" show-overflow-tooltip></el-table-column>//
或者
	
tableColums:[{prop:'name',label:'数据\n单位'}]//

4、表格自定义排序

<el-table
    v-loading="loading"
    height="550"
    size="small"
    ref="table"
    :header-cell-style="hcs"
    :cell-style="cs"
    :data="tableData"
    style="width: 100%"
    @sort-change="sortChange"
    :border="true"
>
</el-table>


<script>
export default {
 data() {
    return {
      hcs: {
        textAlign: "center",
        background: "#f7f8fa",
        fontSize: "14px",
        color: "#333",
        lineHeight: "38px",
      },
      cs: {
        fontSize: "14px",
        lineHeight: "38px",
      },
      tableData: [],
    }
  },
 methods: {
    // 排序
    sortChange(column) {
      //获取字段名称和排序类型
      let fieldName = column.prop;
      let sortingType = column.order;
      //按照降序排序
      if (sortingType == "descending") {
        this.tableData = this.tableData.sort(
          (a, b) => b[fieldName] - a[fieldName]
        );
      }
      //按照升序排序
      else {
        this.tableData = this.tableData.sort(
          (a, b) => a[fieldName] - b[fieldName]
        );
      }
    },
 }
}
</script>

5、el-cascader设置懒加载

<el-cascader
   clearable
   :props="props"
   ref="mycascader"
   v-model="ruleForm.gridIds"
   :options="options1"
></el-cascader>
<script>
export deafult {
    data(){
        return {
            ruleForm:{},
            options1:[],
            props: {
                checkStrictly: true,
                lazy: true,
                lazyLoad:(node, resolve) => {
                  console.log(this.$store)
                  const { level, value } = node;
                  //获取下拉框数据的接口
                  queryUserDataDep({ 
                   pid: value? value:this.$store.state.getConfig.config.departmentId+"00" 
                  }).then((res) => {
                    if (res.code === 200) {
                      const nodes = res.data.map((item) => {
                        return {
                          value: item.id,
                          label: item.name,
                          leaf: level >= 2,
                        };
                     });
                  resolve(nodes);
                    }
              });
            },
          }
        }
    }
}
</script>

6、使用el-table设置多选并实现单选以及根据数据默认选中

<el-table
        ref="multipleTable"
        v-loading="listLoading"
        :data="seat.clients"
        style="width: 100%"
        element-loading-text="拼命加载中"
        border
        @select="select"
        @select-all="selectAll"
        @selection-change="handleSelectionChange"
      ><el-table-column type="selection" width="55"></el-table-column></el-table>

handleSelectionChange(val) {
      this.params1.seatsId = val.length ? val[0].cno : []
    },
    select(selection, row) {
      if (selection.length > 1) {
        const del_row = selection.shift()
        this.$refs.multipleTable.toggleRowSelection(del_row, false)
      }
    },
    selectAll(selection) {
      if (selection.length > 1) {
        selection.length = 1
      }
    },

this.$nextTick(() => {
        // scope.row.seatsBind === 0 ? "绑定" : "未绑定"
        const data = this.seat.clients.filter(ele => ele.cno === row.seatsId)
        this.$refs.multipleTable.toggleRowSelection(data[0], row.seatsBind === 0)
      })

5、表格多选

 <el-table @row-click="rowClick" :data="tableData" ref="multipleTable" element-loading-text="拼命加载中"
            style="width: 100%; margin-bottom: 20px" border>
            <el-table-column type="selection" width="55"></el-table-column></el-table>

clearAll() {
            // 获取删除的id，记得回调列表接口
            let tmp = this.$refs.multipleTable.selection.map(ele => ele.id)
            console.log("tmp",tmp)
        },
        // 行的点击事件和复选框同步
        rowClick(e) {
            this.$refs.multipleTable.toggleRowSelection(e)
        }