ele 多个表格 tab切换后多选, 复选出现的问题

最新推荐文章于 2024-07-10 17:44:22 发布

原创最新推荐文章于 2024-07-10 17:44:22 发布 · 407 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js

在前端开发中遇到一个Vue.js应用中使用Ele表格时，当进行多表格Tab切换时，多选和复选功能出现异常。解决方法是为每个表格分配不同的ref，从而确保复选框能正常工作。

本文若对你有用,给个免费 Star 和关注,持续输出前端各种稀奇古怪的问题

问题如图所示

解决方法

将两个tab 用两个不用的ref, 复选框正常实现

 <template>
   <div>
     <p style="margin: 20px 0;">
        <el-radio-group v-model="radio1" @change="tabchange">
             <el-radio-button label="tab1">tab1</el-radio-button>
             <el-radio-button label="tab2">tab2</el-radio-button>
        </el-radio-group>
      </p>
         <div v-show="radio1 === 'tab1'">
             <u-table
                   ref="plTableTab1"
                   :data="tableData"
                   :height="300"
                   use-virtual
                   showBodyOverflow="title"
                   showHeaderOverflow="title"
                   border>
                   <u-table-column type="index" width="100" fixed/>
                   <u-table-column
                      v-for="item in columns"
                      :key="item.id"
                      :resizable="item.resizable"
                      :show-overflow-tooltip="item.showOverflow"
                      :prop="item.prop"
                      :label="item.label"
                      :fixed="item.fixed"
                      :width="item.width"/>
             </u-table>
          </div>
      <div v-show="radio1 === 'tab2'">
          <u-table
                ref="plTableTab2"
                :data="tableData"
                :height="300"
                use-virtual
                showBodyOverflow="title"
                showHeaderOverflow="title"
                border>
                <u-table-column type="selection" width="60"></u-table-column>
                <u-table-column
                   v-for="item in columns"
                   :key="item.id"
                   :resizable="item.resizable"
                   :show-overflow-tooltip="item.showOverflow"
                   :prop="item.prop"
                   :label="item.label"
                   :fixed="item.fixed"
                   :width="item.width"/>
          </u-table>
       </div>
   </div>
 </template>

  <script>
    export default {
      data() {
        return {
          radio1: 'tab1',
          columns: Array.from({ length: 10 }, (_, idx) => ({
              prop: 'address', id: idx, label: '地址地址地址地址地址地址地址地址地址地址地址' + idx, width: 200
          })),
         tableData: Array.from({ length: 500 }, (_, idx) => ({
                id: idx + 1,
                date: '2016-05-03',
                name: 1,
                ab: '欢迎使用u-table',
                address: '北京市' + idx + 1
           }))
        }
      },
      methods: {
        tabchange() {

        }
      },
      watch: {
        radio1: function (val) {
           if (val === 'tab1') {
              this.$refs.plTableTab1.doLayout()
           } else if (val === 'tab2') {
              this.$refs.plTableTab2.doLayout()
           }
        }
      }
    }
  </script>