vue编辑表格自定义

1、组件页面

<template>
  <!-- 时间点选择组件 -->
  <div class="m-select-wrap">
    <input
      :class="['u-select-input f16', color === 'blue' ? '' : 'white-color']"
      type="text"
      readonly
      @click="openSelect"
      @blur="onBlur"
      v-model="selectName" />
    <div :class="['triangle-down', { 'rotate': rotate }]"></div>
    <div :class="['m-options-panel f16', showOptions ? 'show': 'hidden']">
      <div class="flexBox">
      <p @mousedown="getValue(item.name, item.value, index)" v-for="(item, index) in selectData" :key="index">
        <!-- status
             1蓝色：已上报并上报成功
             2红色：已上报但上报失败
             3绿色：有数据但未上报
             4灰色：无数据(时间未到)
        -->
        <span v-if="item.status==2" class="u-option u-bgRed">{{ item.name }}</span>
        <span v-else-if="item.status==1" class="u-option u-bgBlue">{{ item.name }}</span>
        <span v-else-if="item.status==3" class="u-option u-bgGreen">{{ item.name }}</span>
        <span v-else class="u-option u-bgHui">{{ item.name }}</span>
      </p>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'selectmodel',
    props: {
      selectData: {
        type: Array,
        default: () => {
          return []
        }
      },
      selName: {
        type: String,
        default: ''
      },
      // eslint-disable-next-line vue/require-prop-types
      selValue: {
        default: undefined
      },
      color: {
        type: String,
        default: () => {
          return 'blue'
        }
      }
    },
    computed: {
      selectName: {
        get () {
          return this.selN
        },
        set (newVal) {
          this.selN = newVal
        }
      },
      selectValue: {
        get () {
          return this.selV
        },
        set (newVal) {
          this.selV = newVal
        }
      }
    },
    data () {
      return {
        selN: this.selName,
        selV: this.selValue,
        rotate: false,
        showOptions: false
      }
    },
    methods: {
      openSelect () {
        this.showOptions = !this.showOptions
        this.rotate = !this.rotate
      },
      getValue (name, value, index) {
        this.selectName = name
        this.selectValue = value
        this.$emit('getValue', name, value, index)
      },
      onBlur () {
        this.showOptions = false
        this.rotate = false
      }
    }
  }
</script>

<style lang="less" scoped>
  .m-select-wrap {
    display: inline-block;
    width: 1.3rem;
    height: 30px;
    line-height: 30px;
    position: relative;
    .u-select-input {
      width:1.25rem;
      position: relative;
      background: #3A79EE;
      color: #000;
      height: 30px;
      line-height: 30px;
      padding: 0 15px;
      cursor: pointer;
      border-radius: 4px;
      border: 1px solid #d9d9d9;
      outline: none;

    }
    .white-color {
      background: #FFFFFF;
      color: #000;
    }
    .triangle-down {
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 10px solid #eaeaea;
      position: absolute;
      top: 11px;
      right: 15px;
      transition: transform 0.3s ease-in-out;
    }
    .rotate {
      transform: rotate(180deg);
    }
    .m-options-panel {
      padding: 10px 8px 10px 14px;
      z-index: 99;
      position: absolute;
      background: #FFFFFF;
      border-radius: 4px;
      width: 468px;
      height: 360px;
      overflow-y: scroll;
      border: 1px solid #E3E3E3;
      top: 36px;
      left: 0;
      color: #706F94;
      .u-option {
        display: inline-block;
        padding: 0 12px;
        cursor: pointer;
        background-color: #999999;
        border: none;
        border-radius: 5px;
        color: #fff;
        margin-right: 5px;
      }
      .u-option:hover {
        color: #FFFFFF;
        background: #83EBD8!important;
      }
    }
    .show {
      display: block;
    }
    .hidden {
      display: none;
    }
    .u-bgBlue{
      background: #0099ff!important;
    }
    .u-bgHui{
      background: #999999!important;
    }
    .u-bgRed{
      background: #ff6666!important;
    }
    .u-bgGreen{
      background: #28d8b4!important;
    }
    .flexBox{
      display: flex;
      flex-flow: wrap;
      justify-content: start;
    }
  }
</style>

2、使用页面

        2.1 引入js

import Select from "./components/selectmodel"

        2.2 在components注册

components: {
      Select
},

        2.3使用

<Select
                :selectData="selectData"
                :selValue="selValue"
                color="white"
                :selName="selName"
                v-model="queryParam.ptime"
                @getValue="getValue" />

        2.4 写方法

getValue (name, value, index) {
        this.queryParam.ptime = value;
      },

3、效果图

 

标签：vue,name,自定义,color,编辑表格,height,rotate,background,border
来源： https://blog.csdn.net/qq_35952203/article/details/119453320