element的table单选,多选。

195 阅读1分钟

引入文件
这里是单选
<AssContractDialog ref="AssContract" :visible="contractOpen" @cancel="contractOpen = false "  @confirm="projectConfirm"  />
这里是多选
<AssContractDialog ref="AssContract" :visible="contractOpen" @cancel="contractOpen = false "  @confirm="projectConfirm"  :multiple="true"/>
选择时调用init
handleProject() {
   this.contractOpen = true
   将已选择的select数组放入进去,
   这里是单选
   this.$refs.AssContract.init(this.selectList)
},

这里是table
<el-table v-loading="loading" :data="list" border highlight-current-row @row-click="rowClick">

props: {
   visible: {
      type: Boolean,
      default: false
   },
   // 是否多选
   multiple: {
      type: Boolean,
      default: false,
   },
},
data(){
    return{
        idKey: "contract_id",
        selectData: {}, // 默认选中数据 单选
        selectList: [], // 默认选中数据 多选 id
        selectListData: [], // 默认选中数据 多选 行数据
        defaultQueryParams: {}, // 默认查询参数
    }
}



init(selectData, defaultQueryParams = {}) {
   this.selectData = JSON.parse( JSON.stringify( this.multiple ? {} : (selectData ? selectData : {}) ) );
   this.selectListData = JSON.parse( JSON.stringify( this.multiple ? (selectData ? selectData : []) : [] ) );
   this.selectList = this.selectListData.map(item => item[this.idKey]);

   this.defaultQueryParams = defaultQueryParams;
   this.resetQuery();
},

/**
 * 查询列表
 * */
async getList() {
   this.loading = true;
   const res = await integrProcureContractGetContractMasterList(this.queryParams);
   this.list = res.rows;
   this.total = res.total;
   this.loading = false;
   this.setSelectData();
},
/**
 * 如果当前列表有默认的选中项,则给默认选中项重新赋值
 */
setSelectData() {
   if(this.multiple) {
      this.selectList.forEach((id, index) => {
         let cItem = this.list.filter(item => item[this.idKey] === id)[0];
         if( cItem ) {
            this.selectListData.splice(index, 1, cItem);
         }
      })
   }else {
      let cItem = this.list.filter(item => item[this.idKey] === this.selectData[this.idKey])[0];
      if(cItem) {
         this.selectData = cItem;
      }
   }
},


/**
 * 行点击 单选框选中
 * */
rowClick(row, column, event){
   if(this.multiple) {
      let cIndex = this.selectList.findIndex(id => id === row[this.idKey]);
      if(cIndex === -1) {
         this.selectListData.push(row);
         this.selectList.push(row[this.idKey]);
      }else {
         this.selectListData.splice(cIndex, 1);
         this.selectList.splice(cIndex, 1);
      }
   }else {
      this.selectData = row;
   }
},

/**
 * 确认
 */
confirm() {
   if(this.multiple && this.selectList.length > 0) {
      this.$emit("confirm", this.selectListData);
   }
   else if(!this.multiple && this.selectData[this.idKey]) {
      this.$emit("confirm", this.selectData);
   }
   else {
      this.msgError("请选择设备");
   }
},