vue element 的 Table组件动态增加一行、删除一行,并且在行内有单选框Radio 选择框select
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
·
首先不是选中某一行表格数据,是在一行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”
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:1 个月前 )
c345bb45
1 年前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 1 年前
新一代开源开发者平台 GitCode,通过集成代码托管服务、代码仓库以及可信赖的开源组件库,让开发者可以在云端进行代码托管和开发。旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。
更多推荐


所有评论(0)