专业做毕业设计网站,做洁具最好的网站,网站搭建周期,最专业的网站制作公司今天就讲讲Ant Design Vue下的控件 ---- table表格#xff08;选择和操作#xff09;
结合项目中的需求#xff0c;看看如何配置table控件#xff0c;需求#xff1a;
#xff08;1#xff09;根据列表中的选项#xff0c;单选#xff1b;
#xff08;2#xff0…今天就讲讲Ant Design Vue下的控件 ---- table表格选择和操作
结合项目中的需求看看如何配置table控件需求
1根据列表中的选项单选
2根据已有的选中项默认已选
3得到被选中项的信息。
核心rowSelection.selectedRowKeys
模板中代码如下
templatediv stylemargin: 0; padding: 0a-rowa-col :span24a-tableclassant-table-stripedsizesmallborderedrowKeyinput_item_value:data-sourcebrentDatas:columnsbrentCols:paginationfalse:loadingloading:row-class-name(_record, index) (index % 2 1 ? table-striped : null):rowSelection{type: radio,onChange: rowSelectedChange,selectedRowKeys: selectedInputItemValue,}/a-table /a-col/a-row/div
/template
1. 设置第一列单选按钮
绑定rowSelection属性设置type为radio;并设置rowKey为brentDatas中的主键列名
2. 设置默认选中项
绑定rowSelection属性设置selectedRowKeys。代码如下
const selectedInputItemValue ref([]); //用来设置默认值声明selectedInputItemValue.value.push(res[0].inputItemValue);//res为选中项的结果集将结果集第一行的inputItemValue为默认值。
3. 获取选中项调用onChange方法
//单选事件function rowSelectedChange(selectedRowKeys: string[], selectRows: []) {selectedBrent.value selectedRowKeys[0];//console.log(selectedBrent, selectedBrent.value);selectedInputItemValue.value selectedRowKeys;}
selectedInputItemValue为获取到的选中项集合。
