Element使用方法

1.elment表格的一些操作方法

1.表格分页多选全功能
:row-key='getRowKey'
const getRowKey = (row: any) => {
     return row.id
 }
 
 2.表格禁止选择功能
<el-table-column type="selection" width="55" :selectable="selected" />
 const selected = (row: any, index: Number) => {
      if (row.is_confirm == 1) {
            return false //不可勾选
        } else {
             return true; //可勾选
         }
   }
   
 改变table 样式
 :header-cell-style="{'background-color': '#ee4c1f'}"
 
 自定义from验证
 name: [{ validator: checkAge, trigger: 'blur' }, ],
        const checkAge = (rule: any, value: any, callback: any) => {
            if (!value) {
                return callback(new Error('自定义'))
            }
            setTimeout(() => {
                if (!Number.isInteger(value)) {
                    callback(new Error('自定义'))
                } else {
                    if (value < 18) {
                        callback(new Error('自定义'))
                    } else {
                        callback()
                    }
                }
            }, 1000)
        }
 vue3获取dom的话必须先定义
 import type { FormInstance } from 'element-plus'
 const ruleFormRef = ref<FormInstance>()
 日期限制功能
 <el-date-picker v-model="value1" type="daterange" :shortcuts="shortcuts" range-separator="至"
    start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD" :disabledDate="disabledDate">
</el-date-picker>

自定义规则
  shortcuts: [{
          text: 'Last week',
           value: () => {
               const end = new Date()
               const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                   return [start, end]
                },
            },
            {
                text: 'Last month',
                value: () => {
                    const end = new Date()
                    const start = new Date()
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                    return [start, end]
                },
 }]
自定义限制范围
const disabledDate = (date: Record<string, any>): boolean => {
        return date.getTime() < Date.now() - 24 * 60 * 60 * 1000;
 }
通过dom获取子组件的方法
const numfont = ref();
const gitr=()=>{
   numfont.value.fontet(555)
}

把数组对象的value赋值给另一个数组对象的key
  let arr = [];
  li.forEach((item1) => {
      let newObj = {};
      song.forEach((item2, index) => {
          newObj[item2.label] = Object.values(item1)[index];
      });
      arr.push(newObj);
  });
  console.log(arr);
通过多选控制渲染表头
主要使用
:property="Object.values(item)[1]"
相当于
 listbet: [{
       name: "Option A",
       vakl: 'name'
  }, {
     name: "Option B",
     vakl: 'is_confirm'
}, {
    name: "Option C",
    vakl: 'address'
 }],
 获取之后指定·相应的字段

适配不同分辨率

 使用lodash插件
 npm i lodash -S
 然后在App.vue中导入，此处的App.vue主要指的是主框架，因不同项目可自行选择。
 import _ from 'lodash'
然后给app容器挂上ref=“app”
<template>
    <div id="app" ref="app">
      <router-view />
    </div>
</template>
然后在mounted使用如下方法（其中的1080以及1920为定义的画布尺寸）：

<script>
import _ from "lodash";
export default {
  name: "App",
  mounted() {
    this.$nextTick(() => {
      const $app = this.$refs.app;
      // 设置 屏幕 百分比 尺寸 适配
      const standardScale = "100%" / "100%";

      window.addEventListener(
        "resize",
        _.debounce(function () {
          const docHeight = document.body.clientHeight;
          const docWidth = document.body.clientWidth;

          if (docWidth < 1680) {
            const currentScale = docHeight / docWidth;
            let [scale, translate] = [0, 0];
            if (currentScale < standardScale) {
              // 以高度计算
              scale = docHeight / 1080;
              const shouleWidth = 1920 * scale;
         
              const offsetWidth = docWidth - shouleWidth;
              translate =
                offsetWidth > 0 ? `translate(${offsetWidth / 2}px, 0)` : "";
            } else {
              // 以宽度计算
              scale = docWidth / 1920;
              const shouleHeight = 1080 * scale;
              const offsetHeight = docHeight - shouleHeight;
              translate =
                offsetHeight > 0 ? `translate(0, ${offsetHeight / 2}px)` : "";
            }
            console.log(translate);
            $app.style.cssText = `
            transform: scale(${scale}) ${translate};
            transform-origin: top left;
            min-width: 1920px;
            min-height: 1080px;
          `;
          } else {
            $app.style.cssText = "";
          }
        }),
        300
      );

      if (document.createEvent) {
        var event = document.createEvent("HTMLEvents");
        event.initEvent("resize", true, true);
        window.dispatchEvent(event);
      } else if (document.createEventObject) {
        window.fireEvent("onresize");
      }
    });
  },
};

表格回显数据

<template>
    <div>
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column label="日期" width="120">
                <template slot-scope="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="120">
            </el-table-column>
            <el-table-column prop="address" label="地址" show-overflow-tooltip>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
export default {
    data() {
        return {
            selectionKeys: [1, 2],
            tableData: [{
                id: 1,
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                id: 2,
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                id: 3,
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }],
        }
    },
    // 注意 toggleRowSelection 方法的 row 必须是从 tableData 中提出来的
    // 只有这样获取的 row 才能确定哪一行数据被勾选  涉及到复杂数据指向地址问题
    mounted() {
        const { selectionKeys, tableData } = this
        selectionKeys.forEach(key => {
            tableData.forEach(row => {
                if (row.id == key) {
                    this.$refs.multipleTable.toggleRowSelection(row, true);
                }
            })
        })

        // 错误示范  虽然数据一摸一样  但是指向地址不同  并不能视为同一条数据
        // let selectionRows = [{
        //   id: 1,
        //   date: '2016-05-03',
        //   name: '王小虎',
        //   address: '上海市普陀区金沙江路 1518 弄'
        // }, {
        //   id: 2,
        //   date: '2016-05-02',
        //   name: '王小虎',
        //   address: '上海市普陀区金沙江路 1518 弄'
        // }]
        // selectionRows.forEach(row => {
        //   this.$refs.multipleTable.toggleRowSelection(row, true);
        // })
    },
    methods: {
        handleSelectionChange(rows) {
            this.selectionKeys = rows.map(item => item.id);
            console.log(this.selectionKeys)
        },
    }
}
</script>
<style scoped lang="less"></style>