关键词搜索

全站搜索
×
密码登录在这里
×
注册会员

已有账号? 请点击

忘记密码

已有账号? 请点击

使用其他方式登录

element ui table设置默认选中及禁用实现教程

发布2024-01-17 浏览321次

详情内容

在用element ui开发时,经常用到table表格组件,element ui table表格里可以设置多选,那如何设置默认某一行是选种状态,或者设置某一行是禁用点击呢。

请看elementui文档: https://www.uihtm.com/element/#/zh-CN/component/table

实现的原理:

  • 在数据接口返回时,设置是否禁用状态。

  • 查看文档,利用toggleRowSelection方法设置某行数据为选中状态。注意设置要放在this.$nextTick(function() {...})时执行。

  • 利用列事件:selectable="selectable",控制禁用,

image.png

看下面代码

<el-table
    ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
    <el-table-column type="selection" :selectable="selectable" width="55"></el-table-column>
    <el-table-column label="日期" width="120">
        <template slot-scope="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column prop="name" label="姓名"  width="120"></el-table-column>
    <el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column>
</el-table>


var app = new Vue({
    el: '#app',
    data: {
      tableData: []
    },
    methods: {
        //控制是否禁用
        selectable(row, index)
        {
            if(row.disable)
            return false
            else
            return true
        },
        getData () {
            //此方法就用来模拟axios
            let that = this;
            axios.post('/user', {
                firstName: 'Fred',
                lastName: 'Flintstone'
              }).then(function (response) {
                    that.tableData = response.data.table;
                    that.$nextTick(function() {
                        that.toggle(that.tableData);   //建议包装成方法这样扩展性更强
                    })
              }).catch(function (error) {
                console.log(error);
              });
        },
        toggle (arr) {
            //逻辑代码
            arr.forEach(item => {
                if(...) {
                    this.$refs.multipleTable.toggleRowSelection(item,true);
                }
            });
        }
    }
})


点击QQ咨询
开通会员
上传资源赚钱
返回顶部
×
  • 微信支付
  • 支付宝付款
扫码支付
微信扫码支付
请使用微信描二维码支付
×

提示信息

×

选择支付方式

  • 微信支付
  • 支付宝付款
确定支付下载