weixin_39723010
weixin_39723010
2021-01-07 10:21

使用element集成后,select选择框和日期选择框无法选择

使用element集成后,select选择框和日期选择框无法选择

js
<template>
  <div style="width: 1000px; margin: 0 auto">
    <vxe-table border show-all-overflow show-footer class="vxe-table-element" height="400" :loading="loading" :data.sync="tableData" :edit-config="{key: 'id', trigger: 'click', mode: 'cell', showIcon: false}">
      <vxe-table-column prop="name" label="ElInput" min-width="140" align="center" header-align="center" :edit-render="{type: 'default'}">
        <template v-slot:edit="{ row }">
          <el-input size="small" v-model="row.name"></el-input>
        </template>
      </vxe-table-column>
      <vxe-table-column prop="age" label="ElInputNumber" width="160" :edit-render="{type: 'default'}">
        <template v-slot:edit="{ row }">
          <el-input-number size="small" v-model="row.age"></el-input-number>
        </template>
      </vxe-table-column>
      <vxe-table-column prop="sex" label="ElSelect" width="140" :edit-render="{type: 'default'}">
        <template v-slot:edit="{ row }">
          <el-select v-model="row.sex">
            <el-option v-for="item in sexList" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </template>
        <template v-slot="{ row }">{{ getSelectLabel(row.sex, sexList) }}</template>
      </vxe-table-column>
      <vxe-table-column prop="date" label="ElDatePicker" width="200" :edit-render="{type: 'default'}">
        <template v-slot:edit="{ row }">
          <el-date-picker v-model="row.date" type="date" format="yyyy/MM/dd"></el-date-picker>
        </template>
        <template v-slot="{ row }">{{ formatDate(row.date, 'yyyy/MM/dd') }}</template>
      </vxe-table-column>
    </vxe-table>
  </div>
</template>
<script>
import XEUtils from "xe-utils";
export default {
  name: "about",
  data() {
    return {
      loading: false,
      tableData: [],
      sexList: [{ label: "男", value: '0' }, { label: "女", value: '1' }],
      regionList: []
    };
  },
  created() {
    this.loading = true;
    setTimeout(() => {
      let list = window.MOCK_DATA_LIST.slice(0, 5);
      this.tableData = list;
      this.loading = false;
    }, 500);
  },
  methods: {
    change(val) {
      console.log(val) // 这里选择不上
    },
    footerMethod({ columns, data }) {
      return [
        columns.map((column, columnIndex) => {
          if (columnIndex === 0) {
            return "平均";
          }
          if (["age", "rate"].includes(column.property)) {
            return XEUtils.mean(data, column.property);
          }
          return "-";
        }),
        columns.map((column, columnIndex) => {
          if (columnIndex === 0) {
            return "和值";
          }
          if (["age", "rate"].includes(column.property)) {
            return XEUtils.sum(data, column.property);
          }
          return "-";
        })
      ];
    },
    getSelectLabel (value, list, valueProp = 'value', labelProp = 'label') {
      let item = XEUtils.find(list, item => item[valueProp] === value)
      return item ? item[labelProp] : null
    },
    formatDate (value, format) {
      return XEUtils.toDateString(value, format)
    },
  }
};
</script>

请填写以下版本信息 please complete the following information - 浏览器版本: chrome 74.0.3729.131 - vue: "vue": "^2.6.10", - vxe-table: "vxe-table": "^0.9.10",

该提问来源于开源项目:x-extends/vxe-table

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

4条回答

  • weixin_39557576 weixin_39557576 4月前

    可以使用 vxe-table-plugin-element 或者自行处理事件冲突 任意一种方式都可以

    点赞 评论 复制链接分享
  • weixin_39723010 weixin_39723010 4月前

    谢谢,已经解决,就是遇到了一个需求,鼠标移动到某一行,该行的两侧出现加或减的按钮,不知道有没有hover事件监听

    点赞 评论 复制链接分享
  • weixin_39557576 weixin_39557576 4月前

    可以支持 hover 事件的

    点赞 评论 复制链接分享
  • weixin_39630515 weixin_39630515 4月前

    谢谢,已经解决,就是遇到了一个需求,鼠标移动到某一行,该行的两侧出现加或减的按钮,不知道有没有hover事件监听

    请问 你这边是怎么解决的?

    点赞 评论 复制链接分享

相关推荐