vue element 的 Table组件动态增加一行、删除一行,并且在行内有单选框Radio 选择框select
element table 动态增加一行,删除一行 行内有radio和select
·
首先不是选中某一行表格数据,是在一行el-table-column中的某一列有单选,并且这一页的单选只能选择一个!
html部分
//添加按钮
<el-button type="primary" style="float: right;" @click="addRow(tableData.length)">添加</el-button>
//表格
<el-table :data="tableData" style="width: 100%" ref="tb" :row-class-name="tableRowClassName" @current-change="handleRadioChange">
<el-table-column fixed prop="date" label="日期" ></el-table-column>
<el-table-column prop="name" label="姓名" ></el-table-column>
<el-table-column prop="province" label="本地" >
//单选框部分
<template slot-scope="scope">
<el-radio v-model="radio" :label="scope.row.index">本地</el-radio>
</template>
</el-table-column>
<el-table-column fixed="right" label="操作" >
<template slot-scope="scope">
<el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small">移除</el-button>
</template>
</el-table-column>
</el-table>
效果就这样
这个蛮重要的 我给它起名tableRowClassName
js部分
其中有添加(handleAddDetails),删除(deleteRow),单选框值改变(handleRadioChange)
export default {
data() {
return {
radio: 0,
//给一个默认行
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: 0
}],
}
},
methods:{
tableRowClassName({
row,
rowIndex
}) {
row.index = rowIndex; //在原有的数据上加一个index
},
handleRadioChange(val) {
if (val) {
console.log(val)
this.radio = val.index;
}
},
// 增加一行
addRow(length) {
if (this.tableData == undefined) {
this.tableData = new Array();
}
let obj = {};
obj.date = "2016-05-03";
obj.name = "王小龙";
obj.addresses = length;
this.tableData.push(obj);
},
// 删除一行
deleteRow(index) {
this.tableData.splice(index, 1)
},
}
}
最后结果就这样,点击添加就会在最后追加一行 点击移除会删除一行,表格中的单选框只会选择一个
如果里边还有el-select选择框的话 (此处随便加一个)
<el-table-column prop="food" label="食物">
<template slot-scope="scope">
<el-select v-model="tableData[scope.$index].food" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
</el-table-column>
/*
别忘了给tableData加上food
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: 0,
food: '黄金糕'
}],
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
*/
关键在于v-model绑定的值! v-model=“tableData[scope.$index].food”
更多推荐
已为社区贡献3条内容
所有评论(0)