解决el-table组件中,分页后数据的勾选、回显问题?

问题描述:

        1、记录一个弹窗点击确定按钮后,table列表所有勾选的数据信息

        2、再次打开弹窗,回显勾选所有保存的数据信息

        3、遇到的bug:切换分页,其他页面勾选的数据丢失;点击确认只保存当前页的数据;勾选数据保存后但并未回显......

解决方法:


      <!-- 人员列表 -->
      <Modal
        v-model="showPersons"
        title="人员列表"
        @on-cancel="onClose3"
        width="40%"
        :mask-closable="false"
      >
        <Form :model="personsForm" :label-width="60" inline>
          <FormItem label="姓名:">
            <Input v-model.trim="personsForm.userName" clearable></Input>
          </FormItem>
          <div class="btns">
            <Button @click="onReset1" style="margin-right: 8px">重 置</Button>
            <Button type="primary" @click="userNameSearch">查 询</Button>
          </div>
        </Form>
        <el-table
          v-if="showPersons"
          ref="personsTable"
          :data="personsList"
          style="margin-top: 16px"
          row-key="user_id"
          @select="handleSelectionChange"
          @select-all="handleAllChange"
        >
          <el-table-column
            type="selection"
            width="45"
            :reserve-selection="true"
            align="center"
            fixed
          />
          <el-table-column label="序号" width="55" fixed align="center">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column
            label="姓名"
            prop="user_name"
            :show-overflow-tooltip="true"
          />
        </el-table>
        <Page
          v-show="personTotal > 0"
          :total="personTotal"
          size="small"
          show-elevator
          show-sizer
          show-total
          class="page"
          :page-size-opts="[10, 20, 30, 40]"
          :page-size="personsForm.pageSize"
          :current="personsForm.pageNo"
          @on-change="changePersonsPage"
          @on-page-size-change="personsPageSizeChange"
        />
        <div slot="footer" align="center">
          <Button type="primary" @click="personsSubmit">确 定</Button>
        </div>
      </Modal>

在data中定义暂存勾选的人员Id和人员姓名:

data () {
    return {
        personsList: [], // 人员列表list
        echoList: [],// 人员选中的所有id
        echoListName: []// 人员选中的所有名字
    }

首先需要通过接口获取所有待勾选的人员信息,回显之前暂存的数据信息:

// 获取参会人员列表  获取全部人员名单
    getpersonsList (pageNo, pageSize) {
      //调用接口
      personsList(this.personsForm).then((response) => {
        this.personTotal = response.page.total
        this.personsList = response.data  //暂存所有的人员信息
        this.$nextTick(() => {
          this.personsList.forEach(item => {
            //查询当前列表并回显
            if (this.echoList.includes(item.user_id)) {
              //设置当前行数据为选中状态
              this.$refs.personsTable.toggleRowSelection(item, true); 
            }
          })
        })
      })
    }

其中“ @on-cancel="onClose3" ”表示关闭modal弹窗后进行的操作:保存勾选数据、清空勾选效果、清空form表单、重置分页信息

    // 关闭人员列表弹框
    onClose3 () {
      this.showPersons = false  //关闭modal弹窗
      this.echoList = []  //置空暂存的勾选人员Id
      this.echoListName = []  //置空暂存的勾选人员姓名
      this.$refs.personsTable.clearSelection();  //清空未保存勾选
      this.personsForm.pageSize = 10
      this.personsForm.pageNo = 1
      this.personsForm.userName = null
    }

" @select ",“ @select-all ”官网解释如下:

【el-table官网链接地址:Element - The world's most popular Vue UI framework

 具体实现代码及解释如下:


    // 选择参会人员(已经存在的数据就取消勾选、未存在过的数据就加入勾选)
    handleSelectionChange(selecteds, row) {
      if (!this.echoList.includes(row.user_id)) {
        this.echoList.push(row.user_id);  //暂存新勾选的人员Id
        this.echoListName.push(row.user_name);  //暂存新勾选的人员姓名
      } else {
        this.echoList.forEach((id, index) => {
          if (id == row.user_id) {
            this.echoList.splice(index, 1);  //删除暂存的需要取消勾选的人员Id
            this.echoListName.splice(index, 1);  //删除暂存的需要取消勾选的人员姓名
          }
        });
      }
    },
    // 全选、取消全选
    handleAllChange(selecteds) {
      if (selecteds.length > 0) {
        selecteds.forEach(item => {
          if (!this.echoList.includes(item.user_id)) {
            this.echoList.push(item.user_id);  //暂存新勾选的人员Id
            this.echoListName.push(item.user_name);  //暂存新勾选的人员姓名
          }
        });
      } else {
        this.personsList.forEach(item => {
          this.echoList.forEach((id, index) => {
            if (id === item.user_id) {
              this.echoList.splice(index, 1);  //删除暂存的需要取消勾选的人员Id
              this.echoListName.splice(index, 1);  //删除暂存的需要取消勾选的人员姓名
            }
          });
        });
      }
    }

最后,记得在关闭弹窗时清空勾选及表单:

      this.echoList = []
      this.echoListName = []
      this.$refs.personsTable.clearSelection();
      this.personsForm.userName = null;

前端小白积累经验篇~~

  • 7
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
删除之类操作需要全选功能,方便选择 public class MainActivity extends Activity { private ListView lv; private MyAdapter mAdapter; private ArrayList list; private Button bt_selectall; // private Button bt_cancel; // private Button bt_deselectall; private int checkNum; // 记录选的条目数量 private TextView tv_show;// 用于显示选的条目数量 /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); /* 实例化各个控件 */ lv = (ListView) findViewById(R.id.lv); bt_selectall = (Button) findViewById(R.id.bt_selectall); // bt_cancel = (Button) findViewById(R.id.bt_cancelselectall); // bt_deselectall = (Button) findViewById(R.id.bt_deselectall); tv_show = (TextView) findViewById(R.id.tv); list = new ArrayList(); // 为Adapter准备数据 initDate(); // 实例化自定义的MyAdapter mAdapter = new MyAdapter(list, this); // 绑定Adapter lv.setAdapter(mAdapter); // 全选按钮的回调接口 bt_selectall.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { // 遍历list的长度,将MyAdapter的map值全部设为true for (int i = 0; i < list.size(); i++) { MyAdapter.getIsSelected().put(i, true); } // 数量设为list的长度 checkNum = list.size(); // 刷新listview和TextView的显示 dataChanged(); } }); // 反选按钮的回调接口 // bt_cancel.setOnClickListener(new OnClickListener() { // @Override // public void onClick(View v) { // // 遍历list的长度,将已选的设为未选,未选的设为已选 // for (int i = 0; i < list.siz

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

超级无敌小小小白

感谢老板的打赏~^v^~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值