sortable.js拖动el-table的行给.sortable-chosen添加边框

Question

给.sortable-chosen这个css添加一个border:1px solid #000;这个样式显不出来.

Answer 1

W3C规定，只有table，th和td有独立的边框，tr并无边框。
要想定义tr边框样式，要设置table样式：border-collapse: collapse，目的是将table，th和td的边框合成单一的边框。
然后你定义的样式是要覆盖element-ui样式的，所以你在组件里面写的话，不能用scoped关键字：

<style lang="scss">
table {
    border-collapse: collapse !important;
}
.sortable-chosen {
    border: 1px solid red;
}
</style>

不出意外的话，你拖动的时候，估计只有当前那一行最左边的边框有颜色，原因是element-ui给td加了边框样式，所以你还要去覆盖td的样式，好麻烦...别设置border了，给td设置background-color吧：

<style lang="scss">
.sortable-chosen td {
    background-color: yellow !important;
}
</style>

---

如果你样式是写在外部公共文件，请在element-ui样式文件后面再引入。