小前端小小记录下开发中的一些事儿

vue3.0+elementPlus踩坑

表单的ref和model不能一样，否则会导致表单input输入框无法输入，vue2.0版本是可以一样的

记录修改elementUI el-tree高亮背景色以及hover背景色，字体颜色的修改

.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content{
  background-color: #ffffff;
  color: #25726b;
}

.el-tree-node__content{
  &:hover{
    background-color: #ffffff;
    color: #25726b;
  }
}

记录封装的table组件

<template>
  <div class="table">
    <el-row :gutter="20" class="topMargin">
      <el-col :span="24" :offset="0">
        <el-table :data="tableData" max-height="600" stripe @select="selection">
          <el-table-column
            type="selection"
            width="30"
            :disabled="isDel"
            v-if="isShowRadio"
          >
          </el-table-column>

          <el-table-column
            v-for="col in tableCol"
            :prop="col.prop"
            :key="col.id"
            :label="col.label"
            :fixed="col.fixed || false"
            align="center"
            :width="col.prop == 'id' || col.prop == 'name' ? 'auto' : '150'"
            show-overflow-tooltip
          >
          </el-table-column>

          <el-table-column
            :label="'操作'"
            :width="150"
            align="center"
            fixed="right"
          >
            <template #default="scope">
              <slot :params="scope.row"></slot>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="topMargin">
      <el-col :span="9" :offset="15">
        <el-pagination
          @size-change="sizeChange"
          @current-change="currentChange"
          :current-page.sync="currentPage"
          :page-sizes="[20, 40, 80, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalNum"
          background
          :pager-count="7"
        >
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "dataTable",
  props: {
    tableParams: {
      type: Object,
      default: () => {
        return {};
      },
    },
    paginationParams: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      isShowRadio: true,
      isDel: false,
      currentPage: this.paginationParams.currentPage || 1, //当前页数
      pageSize: this.paginationParams.pageSize || 20, //每页显示的个数
      totalNum: this.paginationParams.totalNum || 0, //总条数
    };
  },
  computed: {
    tableData() {
      return this.tableParams.data;
    },
    tableCol() {
      return this.tableParams.col;
    },
  },
  methods: {
    //pageSize改变触发
    sizeChange(val) {
      console.log(val)
      this.pageSize = val
      this.$emit('getPageSize',this.pageSize)
    },
    //currentPage改变触发
    currentChange(val) {
      console.log(val)
      this.currentChange = val
      this.$emit('getCurrentPage',this.currentChange)
    },
    //选中行
    selection(selection,row){
      this.$emit('returnSelection',selection)
    }
  },
};
</script>

<style scoped>
.topMargin {
  margin-top: 20px;
}
</style>

记录elementUi select多选分页保存选中数据

<el-table
          v-loading="loading"
          :data="userList"
          @selection-change="handleSelectionChange"
          :row-key="
                    (row) => {
                    return row.id + row.name;
                    }
                    "
          ref="totalTable"
          >
    <el-table-column
              type="selection"
              :reserve-selection="true"
              width="50"
              align="center"
            />
</el-table>

记录利用elementUi elTable制作数据对比表格

//利用0 ，1，2，3，4...做为elTable的prop 将tableData转化为key为0，1，2，3，4...的数组
getChangeData() {
    //contrast table数据
    //column table的columns
      const clumnArr = [...new Array(this.contrast.length).keys()]; // 改变数据，根据数据的长度生成数组，作为table的column的prop
      const targetArr = []; // 数据数组
      /**
       * 下面则是将原数组转为合适数据
       */
      const tableData = [];
      let objKey = [];

      // 第一步将原数组中对象的key变为左侧需要展示的文字
      this.contrast.forEach((ele) => {
        const obj = {};
        this.column.forEach((item) => {
          obj[item.label] = ele[item.prop];
        });
        Object.keys(obj).forEach((item) => {
          objKey.push(item);
        });
        tableData.push(obj);
      });

      // 将所有的key值放到数组中
      objKey = [...new Set(objKey)];

      // 根据左侧值遍历数组
      for (let i = 0; i < objKey.length; i++) {
        const obj = {};
        for (let m = 0; m < tableData.length; m++) {
          obj[m] = tableData[m][objKey[i]];
        }
        targetArr.push(obj);
      }

      // 新增一个00作为左侧第一列的prop
      targetArr.forEach((ele, index) => {
        ele["00"] = objKey[index];
      });

      this.targetArr = targetArr;
      this.clumnArr = clumnArr;
    },
  },

记录elForm的校验规则校验以及清除

this.$refs.form.validate(valid => {
    if(valid){}//valid为true 校验成功
})
this.$refs.form.resetFields()//重置表单数据

记录封装的简易elFormItem组件

<template>
  <div style="display: inline-block">
    <el-form-item
      v-if="itemData.type == 'input'"
      :label="itemData.label"
      size="normal"
      :prop="itemData.prop"
    >
      <el-input
        v-model="itemData.value"
        :placeholder="'请输入' + itemData.label"
        clearable
        :style="itemData.style"
        @change="inputChange"
      />
    </el-form-item>

    <el-form-item
      v-if="itemData.type == 'select'"
      :label="itemData.label"
      size="normal"
      :prop="itemData.prop"
    >
      <el-select
        v-model="itemData.value"
        value-key="id"
        :placeholder="'请选择' + itemData.label"
        clearable
        filterable
        :style="itemData.style"
        @change="selectChange"
      >
        <el-option
          v-for="item in itemData.selectList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </el-form-item>

    <el-form-item
      v-if="itemData.type == 'datePicker'"
      :label="itemData.label"
      size="normal"
      :prop="itemData.prop"
    >
      <el-date-picker
        v-model="itemData.value"
        type="date"
        size="normal"
        :placeholder="'请选择' + itemData.label"
        :style="itemData.style"
        @change="datePickerChange"
      >
      </el-date-picker>
    </el-form-item>
  </div>
</template>

<script>
export default {
  name: "zjkhItems",
  props: {
    itemData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  created() {},
  data() {
    return {};
  },
  methods: {
    inputChange(val) {
      this.$emit("changeData", { key: this.itemData.prop, value: val });
    },
    selectChange(val) {
      this.$emit("changeData", { key: this.itemData.prop, value: val });
    },
    datePickerChange(val) {
      this.$emit("changeData", { key: this.itemData.prop, value: val });
    },
  },
};
</script>

<style>
</style>

父组件传入子组件对象数组的样子
[
	{
        type: '',
        label: '',
        value: '',//父组件el-form绑定form中的值
        prop: '',//一方面是用于rules，一方面偷懒用于子组件$emit时当作key传回父组件，定位这个item是对应form中绑定的哪个值
        style: {},//input,select,datePicker的样式
        selectList: [],//type为select时传的
    }，
]

父组件传入的数据格式
let itemDataa = [
        {
          type: "input",
          label: "姓名",
          value: this.form.name,
          prop: 'name',
          style: {
            width: "240px",
          },
        },
        {
          type: "select",
          label: "工作",
          value: this.form.job,
          prop: 'job',
          style: {
            width: "240px",
          },
          selectList: [
            {
              value: '0',
              label: "aaa",
            },
            {
              value: '1',
              label: "bbb",
            },
            {
              value: '2',
              label: "ccc",
            },
            {
              value: '3',
              label: "ddd",
            },
          ],
        },
        {
          type: "datePicker",
          label: "生日",
          value: this.form.birthday,
          prop: 'birthDay',
          style: {
            width: "240px",
          },
        },
      ]

父组件的form绑定的数据
form: {
        name: undefined,
        job: undefined,
        birthDay: null,
      },

父组件根据数据循环
<self-el-items
      v-for="item in inData"
      :itemData="item"
      :key="item.id"
      @changeData="changeData"
    ></self-el-items>

changeData(val){
        this.form[val.key] = val.value;
    }

需要注意父组件form中的值需要和传入子组件中的prop一致，这样子组件才能找到form中绑定的值进行赋值，实现数据双向绑定，后续还会接着改进