vueElementplus,使用nextTick获取input的focues，2022/6/10pm

最新推荐文章于 2023-11-16 14:23:05 发布

xumengxia—xu

最新推荐文章于 2023-11-16 14:23:05 发布

阅读量385

点赞数

分类专栏：工作2022年5月，记录生活的每一天文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/qq_56514785/article/details/125221446

版权

工作2022年5月，记录生活的每一天专栏收录该内容

37 篇文章 1 订阅

订阅专栏

<template>
  <div class="productInformation">

    <div class="table">
        <el-table
           height="760"
           :data="productTreeTable"
           style="width: 100%;"
           row-key="id"
           :default-expand-all="false"
           :header-cell-style="{fontSize:'18px',fontWeight:'600',  }"
            @cell-click="cellClick"  重点调用

        >
         
          <el-table-column  width="55" >
             <template  #default="scope">
               <el-image v-if="scope.row.treePic"  style="width:50px;vertical-align:center;" :src="scope.row.treePic" />
             </template>
          </el-table-column>
         
          <el-table-column prop="name" label="Item Description" width="300" >
            <!-- 有颜色 colorNo: "DDD5C7" -->
            <template  #default="scope">
               <div style="display: flex;align-items: center;">
                 <div v-if="scope.row.colorNo" class="colorbox" :style="{'background-color':'#' + scope.row.colorNo}"></div>
                 <span>{{scope.row.name}}</span>
               </div>
            </template>
          </el-table-column>
          <el-table-column prop="optionNo" label="Valve" />
           <el-table-column label="Price" >
              <template  #default="scope">
              <!-- <el-switch  v-model="scope.row.available" /> -->
              <el-input
                clearable
                ref="editInput"      重点
                v-if="scope.row.seen == true"
                v-model.number="scope.row.price"
                @blur="loseFcous(scope.row)">
              </el-input>
              <span v-else> {{scope.row.price}} </span>
            </template>
           </el-table-column>
          <el-table-column  label="Default" >
            <template  #default="scope">
              <el-switch v-if="scope.row.default == ''"  v-model="scope.row.default" />
            </template>
          </el-table-column>
          
       </el-table>
      
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, toRefs, reactive, onMounted, computed, ref, nextTick } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'

export default defineComponent({
  name: 'product',
  components: {
    // Table,
  },
  setup () {
    const Store = useStore()
    const Router = useRouter()
    const editInput = ref()
    const data = reactive({
      storeNo: computed(() => {
        return Store.state.Microstore.storeNo
      }),
      productTreeTable: computed(() => {
        return Store.state.Product.productTreeTable
      }),
      loseFcous (row:any) {
        console.log('失去焦点')
        row.seen = false
      },
      cellClick (row:any) {
        console.log('点击editInput', row)
        if (!row.children) {
          row.seen = true
          console.log(editInput.value)
          nextTick(() => {
            editInput.value.focus()
            console.log('11')
          })

        }

      },
      handleSubmit () {
        console.log('提交')
      },
      handleClose () {
        console.log('关闭')
        Router.push({
          path: `/dashboard/saleschannel/microstores/${data.storeNo}/products`
        })
      }

    })
    onMounted(() => {
      // data.getStoreStylesdata()
      console.log(data.productTreeTable)
    })
    return {
      ...toRefs(data), editInput

    }
  }

})

</script>
<style lang="less" scoped>
.productInformation {
  width: 100%;
  box-sizing: border-box;
  .table {
    margin-top:30px;
    .colorbox {
      width: 20px;
      height: 20px;
      margin-right:10px;
      // background-color: red;

    }
    .btnend {
      margin-top:60px;
      margin-bottom:40px;
      display: flex;
      justify-content: center;
      .btn {
        width: 92px;
        height: 40px;
        font-size: 18px;
      }
  }
  }
}
// 重置swich样式
::v-deep(.el-switch.is-checked .el-switch__core) {
  background-color: #6a49ac;
  border-color: #6a49ac;
}
// 重置input框的样式
  ::v-deep(.el-input__wrapper) {
    box-shadow: 0 0 0 1px #98a3b3 inset;
  }
  ::v-deep(.el-input__wrapper .is-focus) {
    box-shadow: 0 0 0 2px #6a49ac inset;
  }
  ::v-deep(.el-input__wrapper:hover) {
    box-shadow: 0 0 0 2px #6a49ac inset;
  }
</style>