526互联

关于element-ui 中table的问题以及解决

发布时间 2023-09-07 17:51:22作者: piaohd

这篇文章是记录上个月开发中的问题，有知道原理的请发送邮件

0727

我吐了，element-ui,这玩意咋这么多坑

背景

点击某个按钮，打开内嵌表单的dialog，然后不能让用户手动输入值，要根据后台去查可选项，将可选项变成可视化的表格，表格包含基本信息，再让用户去选；因为有两项值都是这样操作的，即通过表格选择，然后两组数据有部分重叠，但属性名有部分不同，为了省事，就做在一个dialog中了，然后坑爹的地方来了；

在同一个Dialog中渲染不同的表格，其中有使用template的列，该列用来进行操作，刚开始想着复用，即将属性名相同的列不做处理，将其他有不同的列用v-if作判断，该显示哪个，然后翻车了，列的顺序是乱的，数据有时候也不对，就变成了两个表格，每个表格用v-if判断。

然后就又翻车了，见下方问题说明。

问题

在刚点进的时候正常，第一个表格有7列，第七列是操作按钮，第二个表格有六列，第六列是操作按钮，按钮的功能是一样的，绑定的方法也是同一个，然后神奇的来了，显示第一个表，显示正常，关闭Dialog后显示第二个表格，也正常；关闭后再显示第一个表格，第六列变为了操作按钮，列名没有变化，但内容变了？？？,下方代码是例子

  <el-dialog :title="Title" :visible.sync="dialogVisible" width="1000px">
     <el-table v-if="type==1" :data.sync="data">

        <el-table-column label="1" property="1"></el-table-column>
        <el-table-column label="2" property="2"></el-table-column>
        <el-table-column label="3" property="3"></el-table-column>
        <el-table-column label="4" property="4"></el-table-column>
        <el-table-column label="5" property="5"></el-table-column>
        <el-table-column label="6" property="6"></el-table-column>

       <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="Sumit(scope.row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>

   <el-table  v-if="type==2" :data.sync="data">
    	<el-table-column label="1" property="1"></el-table-column>
        <el-table-column label="2" property="2"></el-table-column>
        <el-table-column label="3" property="3"></el-table-column>
        <el-table-column label="4" property="4"></el-table-column>
        <el-table-column label="5" property="5"></el-table-column>

       <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="Sumit(scope.row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>

    </el-dialog>

问题解决

我认为是渲染第二个表格后，再次渲染第一个表格，虚拟dom对比将第二个表格的操作列，直接识别成是相同的节点，没有删除，在第二个表格内部加上blockquote，然后就好使了

 <el-table  v-if="type==2" :data.sync="data">
	<blockquote>
    		<el-table-column label="1" property="1"></el-table-column>
        	<el-table-column label="2" property="2"></el-table-column>
        	<el-table-column label="3" property="3"></el-table-column>
       	 	<el-table-column label="4" property="4"></el-table-column>
        	<el-table-column label="5" property="5"></el-table-column>

       		<el-table-column label="操作" align="center">
          	   <template slot-scope="scope">
            		<el-button size="mini" type="primary" @click="Sumit(scope.row)">选择</el-button>
          	   </template>
        	</el-table-column>
	</blockquote>
</el-table>

问题2

好使是好使了，但是乱序了，第一列跑到最后一列了。。。

问题2解决

改变思路，将操作按钮列去掉，在第一列添加单选按钮，绑定需要传输的值，选中后点击表格下方的确认按钮，成功解决

     <el-table v-if="type==1" :data.sync="data">
        <el-table-column label="选择" align="center">
          <template slot-scope="scope">
            <el-radio v-model="radio" :label="scope.row.id1">
              <!--blockquote 为了占位，不然el-radio会默认在后面显示label内容，但我们不需要显示，<div></div>也可以 -->
              <blockquote></blockquote>
            </el-radio>
          </template>
        </el-table-column>

        <el-table-column label="1" property="1"></el-table-column>
        <el-table-column label="2" property="2"></el-table-column>
        <el-table-column label="3" property="3"></el-table-column>
        <el-table-column label="4" property="4"></el-table-column>
        <el-table-column label="5" property="5"></el-table-column>
        <el-table-column label="6" property="6"></el-table-column>

      </el-table>
      <el-table v-if="type==2" :data.sync="data">
       ...和上面的表格差不多

      </el-table>
      <div>
        <el-button type="primary" @click.stop.prevent="sumit"> 确定 </el-button>
        <el-button @click="dialogVisible = false;"> 取消 </el-button>
      </div>

改进

结合单选表格的监听事件，在单选表格的行的时候选中该行的单选按钮，但不出意外的出问题了

改进的问题

虽然功能无异常，但是在关闭dialog的时候不知道为什么会调用一次行点击监听事件，控制台报错，因为没有值，单选按钮的监听事件是会传入行的数据的，但这次错误调用是没有的，而且下面还有根据数据进行的处理。我真的服了,但改用还是得用

改进问题解决

找了半天还是没找到为啥会在dialog关闭的时候调用table的单选行监听，不关闭啥事没有，一关闭就不知道哪里来的单选行方法的调用；最后只能用笨方法，在传入值后，关闭时将radio的值为null，判断radio是否为null, 是的话，不让他执行里面的操作，然后在打开dialog的时候将值设置为""空字符串，通过radio的值来判断是不发第一次调用。没招了，毁灭吧。