HTML中table判断选中了几行,el-table复选框选中单行或多行点击按钮禁用el-table里面的input输入框该怎么判断？...

最新推荐文章于 2024-03-13 16:54:11 发布

weixin_39709262

最新推荐文章于 2024-03-13 16:54:11 发布

阅读量2.9k

点赞数

文章标签： HTML中table判断选中了几行

bVbpyMH?w=1020&h=335

问题：

1、添加数据后下拉框中未显示带入的数据

2、不可以重复添加相同的数据

3、复选框选中单行或多行以后点击按钮禁用对于行的input

大神们帮忙看看怎么解决啊。

<!DOCTYPE html>

<title>Title</title>

<div>

<el-select

v-model="arrList"

multiple

@remove-tag="arrRemoveTag"

size="small"

collapse-tags

placeholder="请选择">

<el-option

v-for="item in selectList"

:key="item.value"

:label="item.label"

:value="item.value">

</el-option>

</el-select>

<el-button type="primary" @click="selectionDialog = true">添加数据</el-button>

</div>

<el-table

ref="multipleTable"

:data="tableData"

tooltip-effect="dark"

style="width: 100%"

@selection-change="handleSelectionChange">

<el-table-column type="selection" width="55"></el-table-column>

<el-table-column label="日期" width="120">

<el-input :disabled="isShow"></el-input>

</template>

</el-table-column>

<el-table-column prop="name" label="姓名" width="120">

<el-input :disabled="isShow"></el-input>

</template>

</el-table-column>

<el-table-column prop="address" label="地址">

<el-input :disabled="isShow"></el-input>

</template>

</el-table-column>

</el-table>

<el-button type="primary" @click="disableBtn">选中行禁用</el-button>

<el-dialog

title="弹窗"

:visible.sync="selectionDialog"

width="40%">

<el-table

:data="selectionTableData"

@selection-change="selectionChange"

style="width: 100%">

<el-table-column type="index" label="序号" width="70px"></el-table-column>

<el-table-column type="selection"></el-table-column>

<el-table-column prop="name" label="名字" width=""></el-table-column>

</el-table>

</div>

<el-button size="small" @click="selectionDialog = false">取消</el-button>

<el-button size="small" type="primary" @click="confirm()">确定</el-button>

</span>

</el-dialog>

</div>

new Vue({

el: '#app',

data () {

return {

isShow: false, // input 禁用

selectionDialog: false, // 弹窗

arrList: [], // 下拉输入框model

selectList: [],

tableData: [

// {

// date: '2016-05-03',

// name: '王小虎',

// address: '上海市普陀区金沙江路 1518 弄'

// }, {

// date: '2016-05-02',

// name: '王小虎',

// address: '上海市普陀区金沙江路 1518 弄'

// }, {

// date: '2016-05-04',

// name: '王小虎',

// address: '上海市普陀区金沙江路 1518 弄'

// }

selectionTableData: [

{

name: '王二小'

{

name: '李老四'

}

multipleSelection: [], // 页面多选

multipleList: [] // 弹窗多选

}

methods: {

// 页面

handleSelectionChange(val) {

this.multipleSelection = val;

// 弹窗

selectionChange(val) {

this.multipleList = val

// 选中一行或多行禁用行 input

disableBtn () {

this.tableData.forEach((val,inx) => {

this.tableData[inx].isShow = true

console.log('val::',val)

console.log('inx::',inx)

})

// this.multipleSelection.forEach((item,index) => {

// console.log('itme::',item)

// console.log('index::',index)

// })

// 弹窗确定

confirm() {

this.multipleList.forEach((item,index) => {

if(this.arrList.indexOf(item.name) == -1){

this.arrList.push(item.name)

}

this.tableData = this.selectionTableData

})

this.selectionDialog = false

this.multipleList = []

arrRemoveTag (tag) {

console.log(tag);

}

})

weixin_39709262

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML中table判断选中了几行,el-table复选框选中单行或多行点击按钮禁用el-table里面的input输入框该怎么判断？...

问题：1、添加数据后下拉框中未显示带入的数据2、不可以重复添加相同的数据3、复选框选中单行或多行以后点击按钮禁用对于行的input大神们帮忙看看怎么解决啊。<!DOCTYPE html><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="https://...
复制链接

扫一扫